Can't build SvelteKit component libraries with `"moduleResolution": "NodeNext"`

[NatoBoram]

Describe the bug

When importing a TypeScript file with "moduleResolution": "NodeNext", an error occurs which prevents building SvelteKit apps.

These are the important files to reproduce the issue.

• tsconfig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"moduleResolution": "NodeNext",
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true
	}
}

• src/routes/index.svelte

<script lang="ts">
	import { helloWorld } from '$lib/utils/hello_world.js';
	const s = helloWorld();
</script>

<h1>{s}</h1>

• src/lib/utils/hello_world.ts

export function helloWorld() {
	return 'Hello world!';
}

Reproduction

Project:

https://github.com/NatoBoram/sk-import-dotjs-in-ts

Reproduction steps:

git clone git@github.com:NatoBoram/sk-import-dotjs-in-ts.git
cd sk-import-dotjs-in-ts
pnpm i
pnpm run build

Logs

> sk-import-dotjs-in-ts@0.0.1 build /home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts
> vite build

vite v2.9.13 building for production...
✓ 14 modules transformed.
.svelte-kit/output/client/_app/immutable/manifest.json                    1.14 KiB
.svelte-kit/output/client/_app/immutable/layout.svelte-a1869e81.js        0.53 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/_app/immutable/error.svelte-91b78de9.js         1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/immutable/pages/index.svelte-320668b6.js   0.41 KiB / gzip: 0.30 KiB
.svelte-kit/output/client/_app/immutable/chunks/index-dd64db13.js         6.84 KiB / gzip: 2.79 KiB
.svelte-kit/output/client/_app/immutable/start-13c031ae.js                23.04 KiB / gzip: 8.73 KiB
vite v2.9.13 building SSR bundle for production...
✘ [ERROR] [plugin vite:dep-scan] ENOENT: no such file or directory, open '/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/src/lib/utils/hello_world.js'

    node_modules/.pnpm/vite@2.9.13/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39676:43:
      39676 │                 let contents = fs__default.readFileSync(id, 'utf-8');
            ╵                                            ^

    at Object.openSync (node:fs:599:3)
    at Object.readFileSync (node:fs:467:35)
    at /home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/vite@2.9.13/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39676:44
    at callback (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:981:34)
    at handleRequest (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:709:36)
    at handleIncomingPacket (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:756:7)
    at Socket.readFromStdout (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:537:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)

  This error came from the "onLoad" callback registered here:

    node_modules/.pnpm/vite@2.9.13/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39671:18:
      39671 │             build.onLoad({ filter: JS_TYPES_RE }, ({ path: id }) => {
            ╵                   ~~~~~~

    at setup (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/vite@2.9.13/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39671:19)
    at handlePlugins (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:843:23)
    at Object.buildOrServe (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:1137:7)
    at /home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:2085:17
    at new Promise (<anonymous>)
    at Object.build (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:2084:14)
    at Object.build (/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/esbuild@0.14.48/node_modules/esbuild/lib/main.js:1931:51)
    at /home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/node_modules/.pnpm/vite@2.9.13/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39389:54
    at Array.map (<anonymous>)

  The plugin "vite:dep-scan" was triggered by this import

    script:/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/src/routes/index.svelte?id=0:2:28:
      2 │   import { helloWorld } from '$lib/utils/hello_world.js';
        ╵                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~

[vite-plugin-svelte-kit] Build failed with 1 error:
node_modules/.pnpm/vite@2.9.13/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:39676:43: ERROR: [plugin: vite:dep-scan] ENOENT: no such file or directory, open '/home/nato/Code/github.com/NatoBoram/sk-import-dotjs-in-ts/src/lib/utils/hello_world.js'

System Info

System:
    OS: Linux 5.17 Pop!_OS 22.04 LTS
    CPU: (4) x64 Intel(R) Core(TM) i5-3570K CPU @ 3.40GHz
    Memory: 12.10 GB / 23.42 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.4.0 - /usr/bin/node
    Yarn: 1.22.18 - /usr/bin/yarn
    npm: 8.12.1 - /usr/bin/npm
  Browsers:
    Chrome: 102.0.5005.115
    Firefox: 102.0
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.53 
    @sveltejs/kit: next => 1.0.0-next.360 
    svelte: ^3.48.0 => 3.48.0 
    vite: ^2.9.13 => 2.9.13

Severity

blocking all usage of SvelteKit

Can be worked around by running tsc (or tsc --watch) in the workspace. Those files can be deleted with tsc --build --clean.

• Importing a .js typescript resource from a typescript file fails vitejs/vite#3040 (comment)

Additional Information

The commands that fail are these:

pnpm run dev

pnpm run build

References

• Provide a way to add the '.js' file extension to the end of module specifiers microsoft/TypeScript#16577 (comment)
• Ensure .js extensions are present with Typescript 5 cli#205
• Importing a .js typescript resource from a typescript file fails vitejs/vite#3040
• feat: importing ts files using their corresponding js extesions vitejs/vite#5510

[dummdidumm]

Mhhm that's strange, @bluwy didn't Vite add support for resolving .js files to .ts files some time ago?

[bluwy]

Yeah we did have support, but it looks like a different issue based on the logs that the esbuild scanner is not resolving .js as .ts. My guess is that Vite is only doing that when the importer file is .ts but in this case it's a .svelte file. It should theoretically happen for other module resolutions too, but I'll check it when I get to my laptop.

[bluwy]

Dug into this. Looks like it's a bug in the scanner where we didn't implement the heuristic explained in the above comment when scanning. I'm making a PR to fix this upstream.

[bluwy]

Closing as this has been fixed in Vite and will be released in the next beta. Vite 3 stable is coming soon too so it won't be long when the changes propagate here.

[raythurnvoid]

@bluwy Please don't close this because this issue is still there even using vite beta

[bluwy]

Vite haven't published a new beta with the fix yet, or are you using the main branch?

[NatoBoram]

I thought it'd be fine to try on main with pnpm install -D 'https://gitpkg.now.sh/vitejs/vite/packages/vite?5c6cf5a2a6577fb8e8ecc66a0411143af3fed042', but I get another error.

❯ pnpm run dev

> @@0.0.2 dev /home/nato/Code/github.com/
> vite dev

node:internal/errors:477
    ErrorCaptureStackTrace(err);
    ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/nato/Code/github.com//node_modules/.pnpm/@gitpkg.now.sh+vitejs+vite+packages@vite+5c6cf5a2a6577fb8e8ecc66a0411143af3fed042/node_modules/vite/dist/node/cli.js' imported from /home/nato/Code/github.com//node_modules/.pnpm/@gitpkg.now.sh+vitejs+vite+packages@vite+5c6cf5a2a6577fb8e8ecc66a0411143af3fed042/node_modules/vite/bin/vite.js
    at new NodeError (node:internal/errors:388:5)
    at finalizeResolution (node:internal/modules/esm/resolve:405:11)
    at moduleResolve (node:internal/modules/esm/resolve:966:10)
    at defaultResolve (node:internal/modules/esm/resolve:1174:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:605:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:318:18)
    at ESMLoader.import (node:internal/modules/esm/loader:404:22)
    at importModuleDynamically (node:internal/modules/esm/translators:106:35)
    at importModuleDynamicallyCallback (node:internal/process/esm_loader:35:14)
    at start (file:///home/nato/Code/github.com//node_modules/.pnpm/@gitpkg.now.sh+vitejs+vite+packages@vite+5c6cf5a2a6577fb8e8ecc66a0411143af3fed042/node_modules/vite/bin/vite.js:44:3) {
  code: 'ERR_MODULE_NOT_FOUND'
}

Node.js v18.4.0
 ELIFECYCLE  Command failed with exit code 1.

Perhaps it has to be published to be usable? Or maybe @sveltejs/vite-plugin-svelte expects a specific version?

[bluwy]

Perhaps you need to use custom scripts, though I've never used gitpkg (pretty cool though). But Vite should have a beta up soon. Though even so, Vite 3 is a major bump, so there may be breaking changes which are handled at #5005 and sveltejs/vite-plugin-svelte#359. I'd suggest sticking with the workaround for now though.

[dummdidumm]

Does this issue persist now that we moved to Vite 3?