CODEWITHSUNDEEP
typescriptvisual-studio-code
John Lenz
John Lenz

Reputation: 231

VSCode and Typescript 5 moduleResolution "bundler"

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?

Upvotes: 23

Views: 35343

Answers (3)

nameofname
nameofname

Reputation: 190

For others who find this answer and none of the above works, double check your TS version. In one repository I edited, upgrading from 4 -> 5 did the trick.

Before you shout I realize the OP specified they were using TS 5, this answer is here for those of us who are not detail oriented.

Upvotes: 2

Devin Rhode
Devin Rhode

Reputation: 25367

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: Screenshot: This workspace contains a typescript version. Would you like to use the workspace typescript version for typescript and javascript language features? Allow Dismiss Never in this Workspace

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... :)

Upvotes: 2

Leandro Ortiz
Leandro Ortiz

Reputation: 441

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!

Upvotes: 16

Related Questions