Cannot find module @sveltejs/kit/hooks in dev server

[Karlinator]

Describe the bug

When trying to use the newly merged sequence from @sveltejs/kit/hooks the dev server fails to load the module (and therefore fails to run any hooks).

Adapter-node, however, functions properly and chains the hooks (which also means it's not just a dependency installation issue).

Reproduction

Reproduction repo: https://github.com/Karlinator/reproduction-sveltekit-hooks

As stated, this bug applies (as far as I can tell) only in dev mode. Haven't tested any other adapters than node, but that works.

Logs

Error: Cannot find module '@sveltejs/kit/hooks' from '/home/karl/Git/reproduction-sveltekit-hooks/src'
    at Function.resolveSync [as sync] (/home/karl/Git/reproduction-sveltekit-hooks/node_modules/resolve/lib/sync.js:102:15)
    at resolveFrom$3 (/home/karl/Git/reproduction-sveltekit-hooks/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:4079:29)
    at resolve (/home/karl/Git/reproduction-sveltekit-hooks/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73902:22)
    at nodeRequire (/home/karl/Git/reproduction-sveltekit-hooks/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73881:25)
    at ssrImport (/home/karl/Git/reproduction-sveltekit-hooks/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73823:20)
    at eval (//home/karl/Git/reproduction-sveltekit-hooks/src/hooks.ts:3:37)
    at instantiateModule (/home/karl/Git/reproduction-sveltekit-hooks/node_modules/vite/dist/node/chunks/dep-98dbe93b.js:73866:15)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

System Info

System:
    OS: Linux 5.13 Fedora 34 (Workstation Edition) 34 (Workstation Edition)
    CPU: (8) x64 Intel(R) Core(TM) i5-8350U CPU @ 1.70GHz
    Memory: 656.26 MB / 15.37 GB
    Container: Yes
    Shell: 5.1.0 - /bin/bash
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    npm: 7.20.3 - /usr/local/bin/npm
  Browsers:
    Firefox: 90.0.2
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.39 => 1.0.0-next.42 
    @sveltejs/kit: next => 1.0.0-next.153 
    svelte: ^3.34.0 => 3.42.1

Severity

serious, but I can work around it

Additional Information

Currently working around by either compiling with adapter-node during development or just not using sequence.

[benmccann]

Vite seems to be looking for a Node package named @sveltejs/kit/hooks instead of looking at the exports field in the @sveltejs/kit package

Sounds similar to vitejs/vite#3953 and possibly ultimately caused by browserify/resolve#222

It works better if you do import { sequence } from '@sveltejs/kit/dist/hooks.js';. I still got warnings (errors?) in the logs, but the page loaded at least

[benbender]

@benmccann doesn't work and fails with the following:

TypeError: String.prototype.startsWith called on null or undefined
    at startsWith (<anonymous>)
    at node:internal/errors:811:19
    at Array.filter (<anonymous>)
    at node:internal/errors:809:16
    at prepareStackTrace (node:internal/errors:96:12)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1138:38)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:94:18)

[Karlinator]

@benmccann I've just tried manually adding '@sveltejs/kit' to the vite.ssr.noExternal config (by modding Kit, since that option is controlled by Kit) and with that in place Vite loads the dependency just fine.

Is there any reason why we don't already do this? Reading the Vite docs this is the behaviour we want, right? For Vite to not try to use a (nonexistant?) CJS export? Am I missing something? We're already excluding svelte dependencies, just not Kit.

Vite notes that the heuristic will likely get better, but that for now you might need to manually include and exclude packages. I suggest that we add this at least until vitejs/vite#3953 is closed. The option is marked as Experimental by Vite, but we're already using it so ¯\_(ツ)_/¯

If that sounds good I can whip up a PR tomorrow.

[benmccann]

It looks like it's automatically externalized because it's in devDependencies. Moving it to dependencies also fixes it.
https://github.com/vitejs/vite/blob/632a50acd693f4ba79af7d22f1df14cf20e66538/packages/vite/src/node/ssr/ssrExternal.ts#L36

I don't know why Vite treats dependencies and devDependencies differently. I don't think it should. I've asked the Vite team if this is something they'd consider a fix for: https://discord.com/channels/804011606160703521/804439875226173480/878301588110860289

[techniq]

@benmccann FWIW the fact Vite treats devDependencies differently than dependencies has caused me a lot of confusion and frustration

Most of my packages are in devDependencies and I have attempted to pull them but run into errors I couldn't overcome, especially with d3 and lodash-es. I think the issues are a combination of shared transitive dependencies and CommonJS/ESM blending. I revisited it in the last week and ran into issues again, but might try to again as I know they should be dependencies.

All the d3 packages recently adopted type=module which also caused me some pain, and the solution was to add these (but not for d3-scale as it appears to lock the SvelteKit/Vite from starting).

Each time I try to create a minimal reproduction example I struggle to reproduce it but maybe 3rd (or 10th) time is the charm.

I've been trying to follow as much Vite/SvelteKit activity as possible and take a fresh look when it looks like things have changed (hopefully 2 steps forward and no steps back :)).

• Preparing SSR for General Availability: Problematic Dependencies and API Improvements vitejs/vite#4230
• Infinite refresh running vite with SvelteKit #2021
• Automatically add svelte libraries to vite.optimizeDeps.exclude vite-plugin-svelte#125
• feat(optimizer): nested optimization vitejs/vite#4634
• Bundling SSR Modules using CommonJS exports alias results in ReferenceError: exports is not defined vitejs/vite#2579
• [fix] enable Vite pre-bundling except for Svelte packages #2137
• Pre-bundled dependencies doesn't dedupe imports in external files vitejs/vite#3910
• https://github.com/lodash/lodash/issues/5033

Sorry for the long ramble, but in short, I'm interested in what you find out with Vite regarding dependencies and devDependencies as I came to this same realization recently, and couldn't find anything in the Vite or SvelteKit docs regarding it.

[benmccann]

I have a PR out to fix this: vitejs/vite#4699

[rmunn]

Still appears to be happening after the 1.0.0-next.159 release. I just created a brand-new project and did import { sequence } from '@sveltejs/kit/hooks'; and I'm still getting "Error: Cannot find module '@sveltejs/kit/hooks' from 'REPO_ROOT/src'" from Vite. Don't have time right now to do any further tracking down, but the repro is very simple:

• npm init svelte@next
• Edit src/hooks.ts (or .js, happens both in Typescript and Javascript)
• Add import { sequence } from '@sveltejs/kit/hooks';
• Run npm run dev and load http://localhost:3000/

[ignatiusmb]

My bad! I somehow managed to change core/build instead of core/dev

[rmunn]

Can confirm that the 1.0.0-next.160 release fixes it. Thanks!

[zipzit]

I'm seeing same error (ref: https://stackoverflow.com/questions/69113480/sveltekit-cannot-find-module-swiper ) using "version": "1.0.0-next.165", Not sure its the same exact root cause, but clearly

Error: Cannot find module... @ Function.resolveSync ... sync.js:102:15

[benbender]

@zipzit this is a completely different issue, which are open issues about. Just search for "swiper".

[DudkinON]

The same error:
TS2307: Cannot find module @sveltejs/kit/vite or its corresponding type declarations.
"vite": "^4.4.2",
"svelte": "^4.0.5",
"@sveltejs/kit": "^1.20.4"