fix: skip manualChunks if Vite 8's codeSplitting is used (#3227) (#3230)

Author: brillout

packages/vike/src/node/vite/plugins/build/pluginDistFileNames.ts

@@ -14,6 +14,7 @@ import type { Plugin, ResolvedConfig, Rollup } from 'vite'
 import { getAssetsDir } from '../../shared/getAssetsDir.js'
 import { assertModuleId, getFilePathToShowToUserModule } from '../../shared/getFilePath.js'
 import '../../assertEnvVite.js'
+import { isVersionMatch } from '../../../../utils/assertVersion.js'
 type PreRenderedChunk = Rollup.PreRenderedChunk
 type PreRenderedAsset = Rollup.PreRenderedAsset
 
@@ -52,7 +53,8 @@ function pluginDistFileNames(): Plugin[] {
                 "Setting Vite's configuration build.rollupOptions.output.assetFileNames is currently forbidden. Reach out if you need to use it.",
               )
             }
-            {
+
+            if (disableCSSBundling(config)) {
               const manualChunksOriginal = rollupOutput.manualChunks
               rollupOutput.manualChunks = function (id, ...args) {
                 if (manualChunksOriginal) {
@@ -67,8 +69,6 @@ function pluginDistFileNames(): Plugin[] {
                   }
                 }
 
-                // Disable CSS bundling to workaround https://github.com/vikejs/vike/issues/1815
-                // TO-DO/eventually: let's bundle CSS again once Rolldown replaces Rollup
                 if (id.endsWith('.css')) {
                   const userRootDir = config.root
                   if (id.startsWith(userRootDir)) {
@@ -292,3 +292,24 @@ function getRollupOutputs(config: ResolvedConfig) {
   }
   return output
 }
+
+function disableCSSBundling(config: ResolvedConfig) {
+  // Vite 7 => disable CSS bundling, see: https://github.com/vikejs/vike/issues/1815
+  if (!isVite8OrAbove(config)) return true
+
+  // Vite 8 doesn't support `manualChunks` when `codeSplitting` is used.
+  // - It does, however, support `manualChunks` if `codeSplitting` isn't used (despite what the following migration guide says)
+  // - https://vite.dev/guide/migration#removed-object-form-build-rollupoptions-output-manualchunks-and-deprecate-function-form-one
+  // @ts-ignore
+  if (!config.build?.rolldownOptions?.output?.codeSplitting) return true
+
+  // TO-DO/eventually: we should probably show a warning, because Vite 8 still builds the client and server separately (potentially leading to the CSS duplication bug):
+  // https://github.com/vitejs/ecosystem/issues/6
+  return false
+}
+
+function isVite8OrAbove(config: ResolvedConfig) {
+  const viteVersion = config._viteVersionResolved
+  assert(viteVersion)
+  return isVersionMatch(viteVersion, ['8.0.0'])
+}

test-e2e.config.mjs

@@ -85,8 +85,6 @@ function tolerateError({ logSource, logText, testInfo }) {
       '`@vitejs/plugin-react-oxc` for improved performance',
       // [12:21:54.297][/test/photon-vercel/.test-dev.test.ts][pnpm run dev][stderr] You or a plugin you are using have set `optimizeDeps.esbuildOptions` but this option is now deprecated. Vite now uses Rolldown to optimize the dependencies. Please use `optimizeDeps.rolldownOptions` instead.
       '`optimizeDeps.esbuildOptions` but this option is now deprecated',
-      // [12:23:29.908][/test/universal-deploy/test-preview.test.ts][pnpm run preview][stderr] [warn] `manualChunks` option is ignored because the `codeSplitting` option is specified.
-      '`manualChunks` option is ignored because the `codeSplitting`',
       // [12:52:00.813][/examples/react-full][pnpm run dev][stderr] [vite:react-swc] We recommend switching to `@vitejs/plugin-react` for improved performance as no swc plugins are used. More information at https://vite.dev/rolldown
       'We recommend switching to `@vitejs/plugin-react`',
       // [09:37:55.007][/examples/react-full][npm run preview][stderr] 9:37:55 AM [vite] warning: `esbuild` option was specified by "vite:react-swc" plugin. This option is deprecated, please use `oxc` instead.