Adding optimizeDeps and commonjsOptions breaks unrelated imports during build process

[Kaschi14]

Describe the bug

I added vjsf to my project which relies on some CommonJS depencies. So in order to make it work i added this to my vite.config.js:

...
  optimizeDeps: {
    exclude: [
      'node_modules/*'
    ],
    include: [
      'ajv',
      'ajv/dist/2019.js',
      'ajv-formats',
      'ajv-formats/dist',
      'ajv-formats/dist/formats.js',
      'ajv-errors',
      'markdown-it',
      'ajv-i18n',
      'debug',
    ],
  },
  build: {
    commonjsOptions: {
      include: [
        '@json-layout/core/ajv',
        '@json-layout/core/ajv/dist/2019.js',
        '@json-layout/core/ajv-formats',
        '@json-layout/core/ajv-formats/dist',
        '@json-layout/core/ajv-formats/dist/formats.js',
        '@json-layout/core/ajv-errors',
        '@json-layout/core/markdown-it',
        '@json-layout/core/ajv-i18n',
        '@json-layout/core/debug',
      ],
    },
  },
  ...

My application now runs in dev, but when i run npm run build (vite build --force) I get the "default" is not exported by ... error on unrelated packages. For example crypto-js which was in my project before I added vjsf and the commonjsoptions now breaks my build pipeline:

error during build:
RollupError: "default" is not exported by "node_modules/crypto-js/index.js", imported by "src/modules/utils.js".

While importing it like in line 3 below would work for this particular library, the wildcard import does not work for other packages (vue3-markdown-it which i use in my .vue files). So I don't want the wildcard as a fix as it doesn't work with all my libraries, but rather want to understand why this happens and how I can prevent it from happening broadly.

3: import * as jdenticon from 'jdenticon';
4: import CryptoJS from 'crypto-js';

Reproduction

https://stackblitz.com/edit/vitejs-vite-klru7e?file=vite.config.js

Steps to reproduce

Run npm install. Then try npm run build. It will fail with the CryptoJS import error. Try it again after in the vite.config.js deleting

 optimizeDeps: {
    include: [],
  },
  build: {
    commonjsOptions: {
      include: [],
    },
  },

How does this make a difference?

System Info

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 107.17 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.11.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v20.11.0/bin/npm
    pnpm: 9.1.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 127.1.68.137
    Safari: 17.4.1
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.6.2 
    vite: ^4.2.0 => 4.5.3

Used Package Manager

npm

Logs

Click to expand!

```shell vite:config bundled config file loaded in 82.73ms +0ms vite:config using resolved config: { vite:config optimizeDeps: { vite:config disabled: 'build', vite:config include: [ vite:config 'ajv', vite:config 'ajv/dist/2019.js', vite:config 'ajv-formats', vite:config 'ajv-formats/dist', vite:config 'ajv-formats/dist/formats.js', vite:config 'ajv-errors', vite:config 'markdown-it', vite:config 'ajv-i18n', vite:config 'debug' vite:config ], vite:config force: true, vite:config esbuildOptions: { preserveSymlinks: false } vite:config }, vite:config build: { vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ], vite:config outDir: 'dist', vite:config assetsDir: 'assets', vite:config assetsInlineLimit: 4096, vite:config cssCodeSplit: true, vite:config sourcemap: false, vite:config rollupOptions: {}, vite:config minify: 'esbuild', vite:config terserOptions: {}, vite:config write: true, vite:config emptyOutDir: null, vite:config copyPublicDir: true, vite:config manifest: false, vite:config lib: false, vite:config ssr: false, vite:config ssrManifest: false, vite:config ssrEmitAssets: false, vite:config reportCompressedSize: true, vite:config chunkSizeWarningLimit: 500, vite:config watch: null, vite:config commonjsOptions: { include: [Array], extensions: [Array] }, vite:config force: true, vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }, vite:config modulePreload: { polyfill: true }, vite:config cssMinify: true vite:config }, vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', vite:config 'alias', vite:config 'vuetify:styles', 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-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:vue', vite:config 'vuetify:import', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:reporter', vite:config 'vite:load-fallback' vite:config ], vite:config test: { vite:config setupFiles: [ './tests/setupVuetify.js', './tests/setupPlugins.js' ], vite:config deps: { inline: [Array] }, vite:config environment: 'jsdom', vite:config coverage: { provider: 'istanbul', reporter: [Array] } vite:config }, vite:config define: { vite:config 'process.env': {}, vite:config __VUE_OPTIONS_API__: true, vite:config __VUE_PROD_DEVTOOLS__: false, vite:config __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false vite:config }, vite:config resolve: { vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ], vite:config browserField: true, vite:config conditions: [], vite:config extensions: [ vite:config '.js', '.json', vite:config '.jsx', '.mjs', vite:config '.ts', '.tsx', vite:config '.vue' vite:config ], vite:config dedupe: [ 'vue' ], vite:config preserveSymlinks: false, vite:config alias: [ [Object], [Object], [Object] ] vite:config }, vite:config server: { vite:config preTransformRequests: true, vite:config port: 3000, vite:config cors: true, vite:config sourcemapIgnoreList: [Function: isInNodeModules], vite:config middlewareMode: false, vite:config fs: { strict: true, allow: [Array], deny: [Array] } vite:config }, vite:config ssr: { vite:config format: 'esm', vite:config target: 'node', vite:config external: [], vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] } vite:config }, vite:config configFile: '/Users/k14/test/face/vite.config.js', vite:config configFileDependencies: [ vite:config '/Users/k14/test/face/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 optimizeDeps: { force: true }, vite:config build: { force: true } vite:config }, vite:config root: '/Users/k14/test/face', vite:config base: '/', vite:config rawBase: '/', vite:config publicDir: '/Users/k14/test/face/public', vite:config cacheDir: '/Users/k14/test/face/node_modules/.vite', vite:config command: 'build', vite:config mode: 'production', vite:config isWorker: false, vite:config mainConfig: null, vite:config isProduction: true, vite:config css: undefined, vite:config esbuild: { jsxDev: false }, 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: true, vite:config headers: undefined vite:config }, vite:config envDir: '/Users/k14/test/face', vite:config env: { vite:config VITE_BACKEND_ADDRESS: '', vite:config BASE_URL: '/', vite:config MODE: 'production', vite:config DEV: false, vite:config PROD: true vite:config }, 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(1) { vite:config 'fnpd_/Users/k14/test/face' => { vite:config dir: '/Users/k14/test/face', vite:config data: [Object], vite:config hasSideEffects: [Function: hasSideEffects], vite:config webResolvedImports: {}, vite:config nodeResolvedImports: {}, vite:config setResolvedCache: [Function: setResolvedCache], vite:config getResolvedCache: [Function: getResolvedCache] vite:config }, vite:config set: [Function (anonymous)] vite:config }, vite:config createResolver: [Function: createResolver], vite:config worker: { vite:config format: 'iife', vite:config plugins: [ vite:config 'vite:build-metadata', vite:config 'vite:watch-package-data', vite:config 'vite:pre-alias', 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-helper', vite:config 'vite:worker', vite:config 'vite:asset', vite:config 'vite:wasm-fallback', vite:config 'vite:define', vite:config 'vite:css-post', vite:config 'vite:build-html', vite:config 'vite:worker-import-meta-url', vite:config 'vite:asset-import-meta-url', vite:config 'vite:force-systemjs-wrap-complete', vite:config 'commonjs', vite:config 'vite:data-uri', vite:config 'vite:worker-post', vite:config 'vite:dynamic-import-vars', vite:config 'vite:import-glob', vite:config 'vite:build-import-analysis', vite:config 'vite:esbuild-transpile', vite:config 'vite:terser', vite:config 'vite:load-fallback' vite:config ], vite:config rollupOptions: {}, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config }, vite:config appType: 'spa', vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false }, vite:config getSortedPlugins: [Function: getSortedPlugins], vite:config getSortedPluginHooks: [Function: getSortedPluginHooks] vite:config } +18ms vite v4.5.3 building for production... vite:esbuild 46.08ms tsconfck init /Users/k14/test/face +0ms transforming (67) node_modules/vuetify/lib/composables/icons.mjs vite:resolve 0.46ms ../fonts/materialdesignicons-webfont.eot?v=7.0.96 -> /Users/k14/test/face/node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?v=7.0.96 +0ms vite:resolve 0.56ms ../fonts/materialdesignicons-webfont.eot?#iefix&v=7.0.96 -> /Users/k14/test/face/node_modules/@mdi/font/fonts/materialdesignicons-webfont.eot?#iefix&v=7.0.96 +0ms transforming (134) src/assets/tour/account_nobg.png vite:resolve 0.14ms ../fonts/materialdesignicons-webfont.woff2?v=7.0.96 -> /Users/k14/test/face/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=7.0.96 +121ms vite:resolve 0.11ms ../fonts/materialdesignicons-webfont.woff?v=7.0.96 -> /Users/k14/test/face/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff?v=7.0.96 +169ms transforming (171) node_modules/vuetify/lib/composables/layout.mjs vite:resolve 0.19ms ../fonts/materialdesignicons-webfont.ttf?v=7.0.96 -> /Users/k14/test/face/node_modules/@mdi/font/fonts/materialdesignicons-webfont.ttf?v=7.0.96 +508ms ✓ 1342 modules transformed. ✓ built in 5.81s "default" is not exported by "node_modules/crypto-js/index.js", imported by "src/modules/utils.js". file: /Users/k14/test/face/src/modules/utils.js:4:7 2: import svg64 from 'svg64'; 3: import * as jdenticon from 'jdenticon'; 4: import CryptoJS from 'crypto-js'; ^ 5: import app_config from '@/app_config'; 6: import auth_utils from './auth_utils'; error during build: RollupError: "default" is not exported by "node_modules/crypto-js/index.js", imported by "src/modules/utils.js". at error (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:2287:30) at Module.error (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:13745:16) at Module.traceVariable (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:14175:29) at ModuleScope.findVariable (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:12615:39) at FunctionScope.findVariable (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:7124:38) at ChildScope.findVariable (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:7124:38) at MemberExpression.bind (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:9539:49) at CallExpression.bind (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:5892:23) at CallExpression.bind (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:9890:15) at MemberExpression.bind (file:///Users/k14/test/face/node_modules/rollup/dist/es/shared/node-entry.js:5892:23) ```

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] 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.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-klru7e (Open reproduction)