Losing types when importing cjs module using default export with nodenext modules

[wight554]

Bug Report

🔎 Search Terms

cjs typescript nodenext default export

🕗 Version & Regression Information

4.7.0-dev

While using nodenext with pure cjs modules, such as https://github.com/fastify/fastify-cookie or https://github.com/fastify/fastify-static , types are lost when using default export and cjs named export is prohibited

⏯ Playground Link

Playground link with relevant code

💻 Code

import fastifyCookie from 'fastify-cookie';
import fastifyStatic from 'fastify-static';

app.register(fastifyCookie);
app.register(fastifyStatic);

🙁 Actual behavior

import fastifyCookie
Argument of type 'typeof import("/.../node_modules/fastify-cookie/plugin")' is not assignable to parameter of type 'FastifyPluginCallback<any, Server> | FastifyPluginAsync<any, Server> | Promise<{ default: FastifyPluginCallback<any, Server>; }> | Promise<...>'.ts(2345)

🙂 Expected behavior

Type should not be lost while import
Can be workaround by

import { default as fastifyCookie } from 'fastify-cookie';
import { default as fastifyStatic } from 'fastify-static';

But i'm not sure if that's expected or not

[andrewbranch]

Is your file a CJS or ES module? (If you’re not 105% sure: what is its file extension and what is its nearest package.json’s "type" key?)

[wight554]

Fastify plugins are definitely CJS, the project I'm importing those to is ESM (type: "module", module: "nodenext", moduleResolution: "nodenext")
You can see in this PR: wight554/blog-template#50

[wight554]

When using named import, TS successfully compiles, but node throws error:

file:///.../blog-template/dist/server/server.js:9
import { fastifyStatic } from 'fastify-static';
         ^^^^^^^^^^^^^
SyntaxError: Named export 'fastifyStatic' not found. The requested module 'fastify-static' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'fastify-cookie';
const {fastifyCookie} = pkg;

It actually works when following example from error, still wonder if it's a typescript bug or not
At least additionally to issue with incorrectly typed default export, typescript doesn't prevent cjs named import from happening and allows to break runtime.
Module export looks like this:

// plugin.js

/**
 * These export configurations enable JS and TS developers
 * to consume fastify-cookie in whatever way best suits their needs.
 * Some examples of supported import syntax includes:
 * - `const fastifyCookie = require('fastify-cookie')`
 * - `const { fastifyCookie } = require('fastify-cookie')`
 * - `import * as fastifyCookie from 'fastify-cookie'`
 * - `import { fastifyCookie } from 'fastify-cookie'`
 * - `import fastifyCookie from 'fastify-cookie'`
 */
fastifyCookie.fastifyCookie = fastifyCookie
fastifyCookie.default = fastifyCookie
module.exports = fastifyCookie

// plugin.d.ts

declare const fastifyCookie: FastifyPluginCallback<NonNullable<FastifyCookieOptions>>;

export default fastifyCookie;
export { fastifyCookie };

[andrewbranch]

Fastify plugins are definitely CJS

Yes they are, but their own types incorrectly declare a default export:

[wight554]

Fastify plugins are definitely CJS

Yes they are, but their own types incorrectly declare a default export:

I see #13626 is still open, so there's no way to specify type of default export
What's recommended way to do this for cjs modules?

[andrewbranch]

#13626 is not related to this. Fastify just wrote wrong types. Unfortunately the only thing to do is open an issue, fork and fix, or @ts-ignore.

[wight554]

#13626 is not related to this. Fastify just wrote wrong types. Unfortunately the only thing to do is open an issue, fork and fix, or @ts-ignore.

Uh, I see that in this case, the only "easy" fix is to support named import for fastify-static and follow nodejs error recommendation
Like this:

import cookiePlugin from 'fastify-cookie';
const { fastifyCookie } = cookiePlugin;

BTW, shouldn't TS compiler throw error when trying to make named import of CJS module like node does in runtime?