ts error when moduleResolution is "node16"

[dislido]

Describe the bug

I am migrating my node application from cjs to mjs. When I set "moduleResolution": "node16" in tsconfig.json, the vite.config.ts reports This expression is not callable. Type 'typeof import("/node_modules/@vitejs/plugin-react/dist/index")' has no call signatures.ts(2349).
I tried to change reactPlugin() to reactPlugin.default(), the error disappears but vite build failed with error TypeError: reactPlugin.default is not a function

Reproduction

https://stackblitz.com/edit/vitejs-vite-4x7wea?file=tsconfig.json,vite.config.ts,tsconfig.node.json&terminal=dev

Steps to reproduce

set compilerOptions.moduleResolution = 'node16' in tsconfig.json

System Info

System:
    OS: macOS 13.0.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 44.64 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 108.0.2
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.1.1 => 4.1.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[justinwaite]

I see you closed this, is there a resolution for this?

[dislido]

I see you closed this, is there a resolution for this?

The same problem occurs when I use other plugins. I closed this issue because I'm not sure if this is my project configuration problem. Now I temporarily use//@ ts-expect-error to hide the error.

I noticed that if there is a named export, this problem can be circumvented

//@vitejs/plugin-react/dist/index.d.ts

// export { BabelOptions, Options, ReactBabelOptions, viteReact as default };
export { BabelOptions, Options, ReactBabelOptions, viteReact, viteReact as default };

// import reactPlugin from '@vitejs/plugin-react';
import {viteReact} from '@vitejs/plugin-react';

It seems that I should keep this issue open

[ArnaudBarre]

Hi,
I may look into this at one point, but I'm just really annoyed by what ts TS team has done with node16 resolution algorithm.
TS 5 bundler resolution algorithm will solve this mess hopefully

[rgripper]

Same error for me running vite+react on Deno 1.13.3 with TS 4.9.

[robwierzbowski]

I had a similar issue and I believe @Sec-ant has found the issue here: pmndrs/zustand#1381 (comment)

Quick summary: In node16 or nodenext module resolutions, the t.ds file must use a t.mds extension to be discovered by the module resolver.

I'd be happy to roll a PR to add a t.mds file and point to it in the package.json, if the maintainers think that won't cause any additional issues.

[karlhorky]

More details of the broken types for @vitejs/plugin-react over here at Are the types wrong? by @andrewbranch:

Imports of the package under the node16 module resolution setting when the importing module is ESM (its extension is .mts or .mjs, or it has a .ts or .js extension and is in scope of a package.json that contains "type": "module") resolved to CJS types, but ESM implementations.

[karlhorky]

For me what fixed it was creating a patch using pnpm patch (or patch-package for Yarn / npm) with the following changes:

1. Edit package.json to remove the "types" line inside "exports" -> "."
2. Copy dist/index.d.ts to dist/index.d.mts

See example commit here: karlhorky/archive-webpage-browser-extension@ad3a5e6

[ArnaudBarre]

Hi!

With the team we decided to not invest more time in the node16 resolutions issues. This IMO a bad design and this as been fixed with TS 5 bundler mode that more clearly represent how most apps and projects are built.
If you're not able to migrate, we recommend keeping the old "node" resolution algorithm.

[karlhorky]

Just to voice the sentiment that will be certainly coming also from others: this is an unfortunate decision by your team, and is also a bit user-hostile, for those users who need to use some module resolution format for some reason.

Probably the changes to the packages amount to changes to a handful of lines of code, and then you will have proper, non-broken interop with TypeScript 4.7+.

Otherwise you are putting this burden on all of your consumers - either to maintain patches for your broken types or to somehow special-case their environments for Vite plugins.

I would strongly suggest bringing this back to the team and reconsidering this decision.