Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Configuring manualChunks for Rollup breaks a Vite SSR build #8836

Closed
7 tasks done
Kingdutch opened this issue Jun 28, 2022 · 1 comment
Closed
7 tasks done

Configuring manualChunks for Rollup breaks a Vite SSR build #8836

Kingdutch opened this issue Jun 28, 2022 · 1 comment

Comments

@Kingdutch
Copy link

Describe the bug

To bundle together common dependencies (e.g. react and react-dom) that may not change often, it's common to use the manualChunks build option for rollup. However doing so will cause the build command to error when the --ssr flag is passed.

Reproduction

https://github.com/Kingdutch/vite-ssr-manualchunks-repro

System Info

System:
    OS: macOS 12.3
    CPU: (10) arm64 Apple M1 Pro
    Memory: 319.06 MB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.4.0 - ~/.nvm/versions/node/v18.4.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.4.0/bin/yarn
    npm: 8.12.1 - ~/.nvm/versions/node/v18.4.0/bin/npm
    Watchman: 2022.06.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 103.0.5060.53
    Firefox: 101.0
    Safari: 15.4
  npmPackages:
    vite: ^2.9.13 => 2.9.13

Used Package Manager

yarn

Logs

Click to expand!
$ vite build --outDir dist/server --ssr src/entry-server.js --debug
  vite:config bundled config file loaded in 11.96ms +0ms
  vite:config using resolved config: {
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist/server',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: true,
  vite:config     cssTarget: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { output: [Object] },
  vite:config     minify: false,
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: false,
  vite:config     ssr: 'src/entry-server.js',
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   configFile: '~/Projects/vite-ssr-manualchunks-repro/vite.config.js',
  vite:config   configFileDependencies: [
  vite:config     '~/Projects/vite-ssr-manualchunks-repro/vite.config.js'
  vite:config   ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: { outDir: 'dist/server', ssr: 'src/entry-server.js' }
  vite:config   },
  vite:config   root: '~/Projects/vite-ssr-manualchunks-repro',
  vite:config   base: '/',
  vite:config   resolve: { dedupe: undefined, alias: [ [Object], [Object] ] },
  vite:config   publicDir: '~/Projects/vite-ssr-manualchunks-repro/public',
  vite:config   cacheDir: '~/Projects/vite-ssr-manualchunks-repro/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isWorker: false,
  vite:config   isProduction: true,
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'alias',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'vite:worker-import-meta-url',
  vite:config     'vite:watch-package-data',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     fs: { strict: true, allow: [Array], deny: [Array] }
  vite:config   },
  vite:config   preview: {
  vite:config     port: undefined,
  vite:config     strictPort: undefined,
  vite:config     host: undefined,
  vite:config     https: undefined,
  vite:config     open: undefined,
  vite:config     proxy: undefined,
  vite:config     cors: undefined,
  vite:config     headers: undefined
  vite:config   },
  vite:config   env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   packageCache: Map(0) { set: [Function (anonymous)] },
  vite:config   createResolver: [Function: createResolver],
  vite:config   optimizeDeps: {
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object],
  vite:config       [Object], [Object], [Object]
  vite:config     ],
  vite:config     rollupOptions: {}
  vite:config   }
  vite:config } +4ms
vite v2.9.13 building SSR bundle for production...
  vite:deps Crawling dependencies using entries:
  vite:deps   ~/Projects/vite-ssr-manualchunks-repro/index.html
  vite:deps   ~/Projects/vite-ssr-manualchunks-repro/dist/client/index.html +0ms
  vite:resolve 0.19ms /src/entry-client.js -> ~/Projects/vite-ssr-manualchunks-repro/src/entry-client.js +0ms
  vite:resolve 0.32ms /assets/index.bb73fb09.js -> null +2ms
  vite:deps Scan completed in 11.28ms: {} +6ms
✓ 1 modules transformed.
Invalid value for option "output.manualChunks" - this option is not supported for "output.inlineDynamicImports".
error during build:
Error: Invalid value for option "output.manualChunks" - this option is not supported for "output.inlineDynamicImports".
    at error (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:198:30)
    at getManualChunks (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:23632:20)
    at normalizeOutputOptions (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:23407:23)
    at getOutputOptions (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:23759:12)
    at getOutputOptionsAndPluginDriver (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:23754:12)
    at handleGenerateWrite (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:23729:74)
    at Object.write (~/Projects/vite-ssr-manualchunks-repro/node_modules/rollup/dist/shared/rollup.js:23697:20)
    at generate (~/Projects/vite-ssr-manualchunks-repro/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:41688:64)
    at doBuild (~/Projects/vite-ssr-manualchunks-repro/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:41701:26)
    at async build (~/Projects/vite-ssr-manualchunks-repro/node_modules/vite/dist/node/chunks/dep-80fe9c6b.js:41527:16)
error Command failed with exit code 1.

Validations

@sapphi-red
Copy link
Member

sapphi-red commented Jun 28, 2022

In v2, Vite turns on inlineDynamicImports for SSR build.

inlineDynamicImports: ssr && typeof input === 'string',

This is fixed in v3 (#8641), so upgrading to v3 will make it work.
Or you could use the config below to workaround it.

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        inlineDynamicImports: false
      },
    },
  }
});

Kingdutch added a commit to zth/rescript-relay-router that referenced this issue Jun 29, 2022
We use the plugin to work around a bug in Vite 2 which has been fixed in
Vite 3 that breaks the SSR build if the manualChunks Rollup config is
used.

See vitejs/vite#8836
@github-actions github-actions bot locked and limited conversation to collaborators Jul 13, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants