error TS2834 when using moduleResolution Node16

[Maxim-Mazurok]

Describe the bug

As mentioned in vitejs/vite#11552 (comment)

I'm using compilerOptions.moduleResolution = Node16 and getting the following errors when running tsc --noEmit:

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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/vite-node/dist/server.d.ts:1
    16  node_modules/vite/dist/node/index.d.ts:7

Reproduction

https://github.com/Maxim-Mazurok/vite-ts2834

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i9-12900H
    Memory: 41.58 GB / 63.68 GB
  Binaries:
    Node: 19.3.0 - ~\AppData\Local\nvs\default\node.EXE
    npm: 9.2.0 - ~\AppData\Local\nvs\default\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vitest: ^0.26.3 => 0.26.3

Used Package Manager

npm

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.
• 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.

[Maxim-Mazurok]

See Maxim-Mazurok/vite-ts2834@master...fix for temporary fix using patch-package

[sheremet-va]

And what can we do? These are errors from Vite. Maybe the issue should be created in their repo?

[Maxim-Mazurok]

It's already there: vitejs/vite#11552
I thought this might be related to vitest at first, as I only use vitest and don't use vite in my project. I can see now after fixing it with a patch that it probably can't be fixed on your side.
I'm rather surprised that it's not working, I always thought that vite and vitest are ESM-oriented tools.
Anyway, it seems like a good idea to close this issue here, thank you!