Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
NatoBoram opened this issue Jul 6, 2022 · 10 comments · Fixed by vitejs/vite#8966 or vitejs/vite#8969
Labels
bug Something isn't working vite

Comments

@NatoBoram
Copy link

NatoBoram commented Jul 6, 2022

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.

Additional Information

The commands that fail are these:

pnpm run dev
pnpm run build

References

@dummdidumm
Copy link
Member

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

@dummdidumm dummdidumm added bug Something isn't working vite labels Jul 6, 2022
@bluwy
Copy link
Member

bluwy commented Jul 7, 2022

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
Copy link
Member

bluwy commented Jul 7, 2022

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
Copy link
Member

bluwy commented Jul 7, 2022

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.

@bluwy bluwy closed this as completed Jul 7, 2022
@raythurnvoid
Copy link

raythurnvoid commented Jul 7, 2022

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

@bluwy
Copy link
Member

bluwy commented Jul 7, 2022

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

@NatoBoram
Copy link
Author

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.0ELIFECYCLECommand 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
Copy link
Member

bluwy commented Jul 7, 2022

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
Copy link
Member

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

@NatoBoram
Copy link
Author

It works fine, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working vite
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants