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

NatoBoram · 2022-07-06T15:52:07Z

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

The text was updated successfully, but these errors were encountered:

dummdidumm · 2022-07-06T15:55:41Z

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

bluwy · 2022-07-07T03:24:59Z

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 · 2022-07-07T09:20:08Z

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 · 2022-07-07T13:05:45Z

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.

raythurnevoid · 2022-07-07T15:04:06Z

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

bluwy · 2022-07-07T15:28:58Z

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

NatoBoram · 2022-07-07T15:34:20Z

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 · 2022-07-07T17:15:44Z

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 · 2022-07-19T09:07:35Z

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

NatoBoram · 2022-07-19T18:18:21Z

It works fine, thanks!

NatoBoram mentioned this issue Jul 6, 2022

Ensure .js extensions are present with Typescript 5 #2040

Open

dummdidumm added bug Something isn't working vite labels Jul 6, 2022

This was referenced Jul 7, 2022

fix: handle context resolve options vitejs/vite#8966

Merged

fix(scan): detect import .ts as .js vitejs/vite#8969

Merged

bluwy closed this as completed Jul 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

NatoBoram commented Jul 6, 2022 •

edited

dummdidumm commented Jul 6, 2022

bluwy commented Jul 7, 2022

bluwy commented Jul 7, 2022

bluwy commented Jul 7, 2022

raythurnevoid commented Jul 7, 2022 •

edited

bluwy commented Jul 7, 2022

NatoBoram commented Jul 7, 2022

bluwy commented Jul 7, 2022

dummdidumm commented Jul 19, 2022

NatoBoram commented Jul 19, 2022

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

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

Comments

NatoBoram commented Jul 6, 2022 • edited

Describe the bug

Reproduction

Project:

Reproduction steps:

Logs

System Info

Severity

Additional Information

References

dummdidumm commented Jul 6, 2022

bluwy commented Jul 7, 2022

bluwy commented Jul 7, 2022

bluwy commented Jul 7, 2022

raythurnevoid commented Jul 7, 2022 • edited

bluwy commented Jul 7, 2022

NatoBoram commented Jul 7, 2022

bluwy commented Jul 7, 2022

dummdidumm commented Jul 19, 2022

NatoBoram commented Jul 19, 2022

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

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

NatoBoram commented Jul 6, 2022 •

edited

raythurnevoid commented Jul 7, 2022 •

edited