VSCode and Typescript 5 moduleResolution "bundler"

Question

I'm trying to use typescript 5.0.2 and vscode 1.76.2 with the new moduleResolution "bundler" setting in tsconfig. I'm building a frontend with vite so typescript is only being used for typechecking with --noEmit. I can individually get vscode and tsc --noEmit to work with different tsconfigs, but can't get both to work together.

Module node16

If in tsconfig.json, I have

{
  "module": "node16",
  "moduleResolution": "bundler"
 ...
}

then Visual Studio Code works perfectly, it typechecks all files and everthing is great. But, running tsc --noEmit gives the error

tsconfig.json:4:25 - error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

4     "moduleResolution": "bundler",
                          ~~~~~~~~~


Found 1 error in tsconfig.json:4

Module es2020

From the above tsc error, I try and change tsconfig.json to have

{
  "module": "es2020",
  "moduleResolution": "bundler"
 ...
}

Now running tsc --noEmit works perfectly, it runs and typechecks everything perfect. But now vscode is broken. When I open a ts file in vscode, vscode cannot resolve any of the references. When I mouse over an import like @mui/material, vscode gives the error

Cannot find module '@mui/material'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

Two separate tsconfigs

For now, I just made two separate tsconfigs. tsconfig.json has "module": "nodenext" so that vscode works and then I point tsc to a separate tsconfig.file.

Is there a configuration of tsconfig which can work with both tsc and vscode?

Answer 1

That's really only a VSCode version issue.

I was using the VSCode 1.76.2 and I had the same issue. I had errors on my vite.config.js file, when I imported vite and @vitejs/plugin-react. Also, I had errors in any other file when I try to import third-party libraries. In that VSCode version, the only fix I found was to change from bundler to node both in tsconfig.json and tsconfig.node.json

The bundler module resolution is a new feature, implemented on Typescript 5.0 and I think VSCode wasn't 100% ready for it.

I've just updated here (now I have VSCode 1.77.3) and could change back both tsconfig.json and tsconfig.node.json module resolutions to bundler. No more issues!

Answer 2

I was also getting this error with my co-worker Cannot find module '@mui/material'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

My co-worker was on an older vscode version... 1.73.1 iirc.

I tried to run Select typescript version in the command palette, but it wouldn't appear on my co-workers machine.

I verified we had this in the repos .vscode/settings.json file:

  // Nice to have for any repo:
  // (use `typescript` version that's inside `node_modules`)
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,

The hover description for enablePromptUseWorkspaceTsdk is "Enables prompting of users to use the TypeScript version configured in the workspace for Intellisense."

Then we reloaded vscode... patiently waited a little bit... and got this popup in the bottom right of vscode:

We of course clicked "Allow" and viola, moduleResolution: 'bundler' worked fine, all the import statements worked fine, hover annotations, clicking package imports would open the .d.ts files... :)