Conditional dynamic imports share one __vitePreload deps array, dropping CSS/preloads for one branch

[EduardZaydler]

Describe the bug

When two dynamic import() calls are used in mutually-exclusive branches (if/else)
and get wrapped by Vite's __vitePreload helper, minification merges the two
__vitePreload(...) calls into a single call. The first argument correctly becomes a
ternary selecting the right import target, but the second argument (the deps array)
does not — it keeps only one branch's deps, silently dropping the other branch's
preloaded assets (JS chunk preload + its CSS-code-split stylesheet).

In practice: whichever branch's deps got dropped never gets its
<link rel="stylesheet"> injected, even though that branch's JS module still loads
correctly via the (still-correct) ternary's native import(). Production builds
render completely unstyled for that branch, silently — no error, no warning.

Reproduction

https://codesandbox.io/p/devbox/focused-dubinsky-dw47ym?workspaceId=ws_PFv5Ae8htKWU39qbDgtegb

Steps to reproduce

yarn vite build

System Info

System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
    CPU: (2) x64 AMD EPYC
    Memory: 1.85 GB / 4.01 GB
    Container: Yes
    Shell: Unknown
  Binaries:
    Node: 20.19.6 - /usr/local/share/nvm/versions/node/v20.19.6/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.8.2 - /usr/local/share/nvm/versions/node/v20.19.6/bin/npm
    pnpm: 8.15.6 - /usr/local/share/npm-global/bin/pnpm
  npmPackages:
    @vitejs/plugin-react: ^4.3.4 => 4.7.0 
    vite: 8.0.16 => 8.0.16

Used Package Manager

npm

Logs

Hit this in production on a real app that conditionally loads one of two top-level
bundles (import("./mobile.bundle") / import("./desktop.bundle")) based on a
runtime user-agent check. The mobile bundle's CSS silently never loaded in
production (page rendered completely unstyled on mobile) while desktop worked —
desktop happened to be the "surviving" branch in the merged deps array. The JS
itself always loaded fine; only CSS-preload was affected.

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 vuejs/core 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.

[AbarnaaSree]

Hi, I’d like to work on this issue. I was able to understand the reported behavior regarding conditional dynamic imports and the __vitePreload dependency array, where one branch’s CSS/preload dependencies can be dropped after minification.

If no one is currently working on this, I’d be happy to investigate the root cause, add a regression test, and submit a PR with a fix. Please let me know if I can take this issue.

[SnowingFox]

I could not reproduce this on current main (vite 8.2.1 / rolldown 1.2.1, default build.minify: "oxc"), and traced why.

• Emission is correct: the native rolldown viteBuildImportAnalysisPlugin wraps each bare import() in its own __vitePreload(() => import("x"), __VITE_PRELOAD__), and importAnalysisBuild.ts generateBundle + matchImportsToPreloadMarkers pairs each marker with its own imported deps — so conditional branches yield cond ? __vitePreload(…depsA) : __vitePreload(…depsB), one call per branch.
• The reported merge can only be a minifier collapsing the two calls. I ran the pre-minify shape through oxc-minify 0.133.0 (bundled by rolldown 1.0.3 = vite 8.0.16, the version in the report), 0.142.0 (bundled by current main), 0.90–0.144, and esbuild 0.28 — none merge them; the ternary is always preserved (oxc requires a pure callee and __vitePreload is side-effectful).

If it still reproduces on a current vite build, a repro bundle + build.minify config would help isolate it (likely upstream in oxc/rolldown rather than Vite emission). Otherwise this may be worth closing as no-longer-reproducible. Happy to dig further with a repro.

[bluwy]

I'm seeing it merged with the latest version still. So for this code:

const flag = Math.random() > -1;

if (flag) {
  import("./a.jsx").then((m) => console.log("a", m));
} else {
  import("./b.jsx").then((m) => console.log("b", m));
}

Build becomes

})(
  Math.random() > -1
    ? () => import(`./a-BGB04Byo.js`).then((e) => console.log(`a`, e))
    : () => import(`./b-BvRk9kiK.js`).then((e) => console.log(`b`, e)),
  [],
)

If I add some logs in the if-else blocks to de-optimize the minification slightly, it seems to work:

Math.random() > -1
  ? (console.log(`a`),
    p(() => import(`./a-BGB04Byo.js`).then((e) => console.log(`a`, e)), __vite__mapDeps([0, 1])))
  : (console.log(`b`), p(() => import(`./b-BvRk9kiK.js`).then((e) => console.log(`b`, e)), []))

Note that the second dynamic import has intentionally no deps because it does not load any CSS files.