Dynamic CSS import fails because it tries to load JavaScript instead

[vwkd]

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)

await import("mod.css");

will generate a build with a [page].svelte-[hash].js with an import of a .js file that doesn't exist

async function h() {
    await a((() => import("../chunks/mod-b7268ec5.js")), [])
}

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).

Reproduction

See https://github.com/vwkd/sveltekit-bugs/tree/dynamic-import

1. Run npm run build && npm run preview
2. Click the button
3. Observe no text color change and a console error (import failed)

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.

1. Run npm run dev
2. Click button
3. Observe text color green (import successful)

System Info

System:
    OS: macOS 11.5
  Binaries:
    Node: 16.6.0 - ~/.nvm/versions/node/v16.6.0/bin/node
    npm: 7.19.1 - ~/.nvm/versions/node/v16.6.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.131
    Firefox: 90.0.2
    Safari: 14.1.2
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.11 => 1.0.0-next.16 
    @sveltejs/kit: next => 1.0.0-next.144 
    svelte: ^3.34.0 => 3.42.1

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• 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.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[vwkd]

(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.

[hex-ci]

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]

Thanks. Duplicate of #3307 then, so closing.