You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When building a SvelteKit with a page that dynamically imports CSS, the import will fail. Dynamically importing JavaScript works fine.
This issue occurs only when building for production (npm run build), and not when running the development server (npm run dev).
It seems like instead of a .css file it's trying to load a .js file that doesn't exist. The server then correctly responds with a 404 which makes the import throw because it expected JS and not the HTML of the error page.
For example, a page that has dynamic imports like this (within some async function)
awaitimport("mod.css");
will generate a build with a [page].svelte-[hash].js with an import of a .js file that doesn't exist
instead of the .css file that does exist ../assets/mod-ebd5bba8.css.
A workaround is to not import CSS dynamically but at the top-level using
import"some.css"
The drawback is that this is always run when opening the page because it's top-level, while the dynamic imports can sit in some function that runs only when desired (e.g. after a click on a button).
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
vwkd
changed the title
Dynamic import of JS fails if other dynamic import of CSS is present
Dynamic CSS import fails because it tries to load a JS file
Aug 25, 2021
(Note, I edited the issue to simplify it because it doesn't actually have to do with other JavaScript imports.)
Meanwhile I tried to replicate it in a vanilla Vite project but I failed. Instead I encountered this seemingly different bug #4731 and I'm not sure if they are connected.
This problem has been fixed in #3333 (Vite 2.5.1), but a #4731 issue you submitted was introduced, and then I tried to fix it #4740
vwkd
changed the title
Dynamic CSS import fails because it tries to load a JS file
Dynamic CSS import fails because it tries to load JavaScript instead
Aug 26, 2021
Describe the bug
(This bug was initially filed at sveltejs/kit#2275)
When building a SvelteKit with a page that dynamically imports CSS, the import will fail. Dynamically importing JavaScript works fine.
This issue occurs only when building for production (
npm run build
), and not when running the development server (npm run dev
).It seems like instead of a
.css
file it's trying to load a.js
file that doesn't exist. The server then correctly responds with a 404 which makes the import throw because it expected JS and not the HTML of the error page.For example, a page that has dynamic imports like this (within some async function)
will generate a build with a
[page].svelte-[hash].js
with an import of a.js
file that doesn't existinstead of the
.css
file that does exist../assets/mod-ebd5bba8.css
.A workaround is to not import CSS dynamically but at the top-level using
The drawback is that this is always run when opening the page because it's top-level, while the dynamic imports can sit in some function that runs only when desired (e.g. after a click on a button).
Reproduction
See https://github.com/vwkd/sveltekit-bugs/tree/dynamic-import
npm run build && npm run preview
You see the second erroneous import failing in the network tab
Note, this issue occurs only when building for production, not when running the dev server.
npm run dev
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: