vite: TS errors after switching moduleResolution from Node to Node16

Describe the bug

After changing moduleResolution from Node to Node16 in my tsconfig.json and running tsc in my app, I get plenty of TS errors (pasted below in Logs).

I don’t use vite in my project, only vitest but the errors seem to come out of vite and vite-node types.

One way to bypass this issue is to add "skipLibCheck": true to tsconfig.json but it’s not a long term solution.

Reproduction

https://github.com/srflp/vite-node16-moduleresolution-type-errors

Steps to reproduce

pnpm install tsc

System Info

System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 74.13 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.12.1/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Edge: 108.0.1462.54
    Firefox: 108.0.1
    Safari: 16.2

Used Package Manager

pnpm

Logs

➜ tsc -v
Version 4.9.4

➜ tsc

node_modules/.pnpm/vite-node@0.26.3_@types+node@18.11.18/node_modules/vite-node/dist/server.d.ts:1:48 - error TS1479: The current file is a CommonJS module whose imports will produce 'require' calls; however, the referenced file is an ECMAScript module and cannot be imported with 'require'. Consider writing a dynamic 'import("vite")' call instead.

1 import { TransformResult, ViteDevServer } from 'vite';
                                                 ~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:7:34 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

7 import { ConnectedPayload } from "../../types/hmrPayload";
                                   ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:8:32 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

8 import { CustomEventMap } from "../../types/customEvent";
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:9:31 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

9 import { CustomPayload } from "../../types/hmrPayload";
                                ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:13:30 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

13 import { ErrorPayload } from "../../types/hmrPayload";
                                ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:20:35 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

20 import { FullReloadPayload } from "../../types/hmrPayload";
                                     ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:21:42 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

21 import { GeneralImportGlobOptions } from "../../types/importGlob";
                                            ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:23:28 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

23 import { HMRPayload } from "../../types/hmrPayload";
                              ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:25:41 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

25 import { ImportGlobEagerFunction } from "../../types/importGlob";
                                           ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:26:36 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

26 import { ImportGlobFunction } from "../../types/importGlob";
                                      ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:27:35 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

27 import { ImportGlobOptions } from "../../types/importGlob";
                                     ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:29:41 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

29 import { InferCustomEventPayload } from "../../types/customEvent";
                                           ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:32:35 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

32 import { InvalidatePayload } from "../../types/customEvent";
                                     ~~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:33:32 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

33 import { KnownAsTypeMap } from "../../types/importGlob";
                                  ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:48:30 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

48 import { PrunePayload } from "../../types/hmrPayload";
                                ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:67:24 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

67 import { Update } from "../../types/hmrPayload";
                          ~~~~~~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:68:31 - error TS2834: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Consider adding an extension to the import path.

68 import { UpdatePayload } from "../../types/hmrPayload";
                                 ~~~~~~~~~~~~~~~~~~~~~~~~


Found 17 errors in 2 files.

Errors  Files
     1  node_modules/.pnpm/vite-node@0.26.3_@types+node@18.11.18/node_modules/vite-node/dist/server.d.ts:1
    16  node_modules/.pnpm/vite@4.0.3_@types+node@18.11.18/node_modules/vite/dist/node/index.d.ts:7

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. For example, if it’s a Vue SFC related bug, it should likely be reported to vuejs/core instead.
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.

About this issue

Original URL
State: closed
Created a year ago
Reactions: 19
Comments: 16 (3 by maintainers)

Commits related to this issue

test: fix dagre unit tests types Get TypeScript working with the dagre unit test types. Because Typescript's `nodenext` doesn't work well with vitest's types (see https://github.com/vitejs/vite/issu... — committed to aloisklink/dagre-es by aloisklink a year ago
test: fix dagre unit tests types Get TypeScript working with the dagre unit test types. Because Typescript's `nodenext` doesn't work well with vitest's types (see https://github.com/vitejs/vite/issu... — committed to aloisklink/dagre-es by aloisklink a year ago
Add TypeScript config that checks module resolution - `compilerOptions.skipLibCheck` is set to `true` to get around Vite issues. See https://github.com/vitejs/vite/issues/11552 for details. - `exclud... — committed to wojtekmaj/react-async-button by wojtekmaj a year ago
Add TypeScript config that checks module resolution - `compilerOptions.skipLibCheck` is set to `true` to get around Vite issues. See https://github.com/vitejs/vite/issues/11552 for details. - `exclud... — committed to wojtekmaj/react-async-button by wojtekmaj a year ago
Ignore vite config TS error https://github.com/vitejs/vite/issues/11552 — committed to gitKrystan/prettier-plugin-ember-template-tag by gitKrystan 10 months ago

Most upvoted comments

👋 Hi Vite maintainers, I work on the TypeScript team and am the author of https://arethetypeswrong.github.io that @karlhorky mentioned above. Would you like help solving this issue? I would be happy to discuss solutions, answer questions, or even raise a PR. However, the core team has previously expressed resistance to fixing these issues, so I want to get clarification on whether the team is interested in making Vite APIs compatible with TypeScript before investing time into this.

I really love Vite as a product and would be thrilled to establish a better relationship between our teams and better compatibility between our tools. In the short term though, I just want to type-safely require("vite") in an old CJS project I inherited 😅

What can I do to help?

+21

andrewbranch on May 25, 2023

Seems like there are good news: in the issue linked above @bluwy said

will likely fix it in the next Vite major.

🥳 just to let folks subscribed to this issue know 😉

dargmuesli on Aug 31, 2023

This issue (and this issue tracker in general) may not be the right place for that conversation.

I’m very much interested in the discussion you are having. I think it’s great that it’s shared here! You give very interesting insights @andrewbranch and I’m sure there are quite a few people who like to follow along here, silent subscribers 😃

dargmuesli on May 29, 2023

More details of the broken types for vite and vite/client over here at Are the types wrong? by @andrewbranch:

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

Imports of multiple entrypoints resolved to ES modules from a CJS importing module. CJS modules in Node will only be able to access this entrypoint with a dynamic import.

karlhorky on Mar 25, 2023

Could you elaborate more how that fixes the issue for you? 🤔

I replied with a code where I dont get errors locally

https://github.com/srflp/vite-node16-moduleresolution-type-errors/issues/1#issue-1522538268

( This is may be a quick workaround but certainly not a solution. )

santifoo on Jan 8, 2023

adding "types": ["vitest/globals"] in tsconfig.json and removing all vitest imports does not fix anything

What @santimirandarp suggested and what I did was to remove vitest/globals, not to add it. In my case, at least, they were replaced by @types/jest.

Anyway, I can’t seem to get it working anymore either, might’ve forgotten to disable the patch last time I was trying.

Maxim-Mazurok on Jan 6, 2023