Break in version 292 in handling local modules #4261
Comments
|
Potentially something changed in Vite. I would say that the way you have setup this project is a bit odd. I'm not sure you can do: I would recommend that a better solution would be to setup a monorepo with pnpm and a |
Thanks Ben. My actual setup is a monorepo (rushjs, which uses pnpm). I just went as vanilla as I could to reproduce the problem. Is your suggestion that I take this to the Vite folks? |
|
Note: In the repro, the I'm not sure it's an issue in Vite. The error comes from the adapter stage where it's trying to bundle from In Unfortunately I haven't been following along the development recently to pinpoint the cause of it. |
|
If this started happening in 292 then the most likely culprit would be #4192. I'm not sure what in their would cause it though Do you think you can provide a version of the reproduction that uses pnpm? The current setup is a bit unusual, but we'd like to support pnpm |
Yes of course @benmccann , see if this helps: https://github.com/mike-hogan/sveltekit-292-break-pnpm Thanks. |
|
I've been seeing something similar just now and have some idea of what's happening, though not a complete picture yet. #4192 would be responsible for making this error show up during the build, but the underlying problem is still there, and would still fail when you try to actually run the server. Short version: Vite is bundling files from the monorepo dependencies directly into the server bundle, which then try to include their own dependencies that aren't accessible from the main app package. I'll use the files in @mike-hogan's latest example repo to explain. The module dependency tree looks like this: graph TD
sveltekit-app --> module --> lodash
With pnpm (and RushJS, which uses it by default), each package in the monorepo gets its own When doing the SSR build, Because // module/index.js
import {head} from 'lodash'
export const x = 1;import { c as create_ssr_component, e as escape } from "../../chunks/index-b3d44d52.js";
// module/index.js is directly integrated into the output here.
import "lodash";
const x = 1;
const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="${"https://kit.svelte.dev"}">kit.svelte.dev</a> to read the documentation</p>
x = ${escape(x)}`;
});
export { Routes as default };Workaroundsssr.externalI haven't fully validated this yet, but it seems that one workaround here is to put the in-monorepo dependencies into const config = {
kit: {
adapter: adapter(),
vite: () => ({
ssr: {
external: ['module']
}
})
}
};Which changes the output to conform to pnpm's dependency model: import { c as create_ssr_component, e as escape } from "../../chunks/index-b3d44d52.js";
import { x } from "module";
const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="${"https://kit.svelte.dev"}">kit.svelte.dev</a> to read the documentation
</p>
x = ${escape(x)}`;
});
export { Routes as default };This isn't ideal but may be the best workaround for now. It's worth noting that you can't use dependency hoistingI think installing with the Just add the depsAdding |
benmccann
added
bug
|
Thanks @dimfeld for your investigation. I was facing similar issue with my rushjs + pnpm project. The issue happens with single module node projects using Your |
|
This issue has resurfaced in my repo. In spite of The current workaround is to add transient dependencies to the main app project. But like @dimfeld has mentioned, this will be quite unwieldy for the large project. I have created a sample repo to help anyone reproduce this issue. - https://github.com/bhvngt/sveltekit_rushjs. Any help here will be very much appreciated. |
|
We were facing the same issue and were able to come up with a simple solution that gives you the benefit of HMR for local modules in your monorepo when running sveltekit dev, and correct handling at build time. In svelte.config.js add const config = {
vite: {
optimizeDeps: {
include: ['@company/lib1', '@company/lib2'],
},
},
}By default, vite will treat your local modules as source files in dev mode. Since source files are not bundled in dev mode, the library files are not moved and can resolve the modules they depend on in their node_modules. At build time, by default vite will also treat your local modules as source files and bundle them with your sveltekit application code. This causes a problem because the bundled code is located in a different location and so the code can't find the packages in the node_modules folder of the sveltekit app. To solve this we tell vite to optimize our local modules at build time. This treats them as external modules rather than source code. This only affects treatment at build time. Hope this helps! |
|
@rsweeney21 does your fix still work for |
|
Not reproducible anymore given the OP's pnpm reproduction. |
Describe the bug
Using version 291, I can build a small sveltekit app that depends on a local module that depends on lodash.
Using version 292, I get this error:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'lodash' imported from /repos/personal/sveltekit-292-break/sveltekit-app/.svelte-kit/output/server/entries/pages/index.svelte.jsReproduction
https://github.com/mike-hogan/sveltekit-292-break/tree/main
Logs
System Info
Severity
blocking an upgrade
Additional Information
No response
The text was updated successfully, but these errors were encountered: