Dependency optimization causes duplication when applied during the build

[mciesin]

Describe the bug

The bug was quite hard to track down and reproduce as the build time optimizations depend on the size and structure of the project. I managed to reproduce it in both Vite 3 and Vite 4.

The issue might be related to #9171, but it seems to be slightly different, as it doesn't report any duplicated modules differing by a query when using the hook from the mentioned issue.

In the attached reproduction, chart.js library is imported in two places. It is imported directly into the project, and by the chartjs-plugin-datalabels plugin. There is also a rollup plugin added in order to slow down the build process, and leave some time for the build time optimization mechanism.

The first time the build is started, there are ✨ new dependencies optimized and ✨ optimized dependencies changed. reloading messages. Output js file contains ~27k lines of code, whereas the second time the build is triggered, it results in ~15k lines.

The output contains, among other things, a duplicated ArcElement class, coming from the chart.js library. It is the direct cause of the issue, visible in the browser console (and on the screen, as the chart is not being rendered properly).

Reproduction

https://github.com/mciesin/vite-build-issue

Steps to reproduce

1. Run npm install, npm build and npm preview.
2. You can notice the issue as the browser can't render properly the chart, there is also an error visible in the browser's console.
3. Run npm build and npm preview.
4. The issue is no longer the case, optimized dependencies were taken from the .vite cache.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
    Memory: 14.52 GB / 31.61 GB
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (108.0.1462.54)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vite: ^4.0.3 => 4.0.3

Used Package Manager

npm

Logs

Click to expand!

> vite build --debug      

  vite:config bundled config file loaded in 29.86ms +0ms
  vite:esbuild init tsconfck (root: C:/Projects/Vite/vite-project) +0ms
  vite:esbuild init tsconfck (root: C:/Projects/Vite/vite-project) +2ms
  vite:esbuild init tsconfck (root: C:/Projects/Vite/vite-project) +1ms
  vite:esbuild init tsconfck (root: C:/Projects/Vite/vite-project) +0ms
  vite:esbuild init tsconfck end +1ms
  vite:esbuild init tsconfck end +1ms
  vite:esbuild init tsconfck end +0ms
  vite:esbuild init tsconfck end +1ms
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'vite:build-metadata',
  vite:config     'vite:pre-alias',
  vite:config     'alias',
  vite:config     'slow-down',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:optimized-deps-build',
  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     'vite:watch-package-data',
  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:reporter',
  vite:config     'vite:load-fallback'
  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: false,
  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     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
  vite:config     modulePreload: { polyfill: true }
  vite:config   },
  vite:config   optimizeDeps: { disabled: false, esbuildOptions: { preserveSymlinks: false } },
  vite:config   configFile: 'C:/Projects/Vite/vite-project/vite.config.mjs',
  vite:config   configFileDependencies: [ 'C:/Projects/Vite/vite-project/vite.config.mjs' ],
  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: undefined },
  vite:config     build: {}
  vite:config   },
  vite:config   root: 'C:/Projects/Vite/vite-project',
  vite:config   base: '/',
  vite:config   rawBase: '/',
  vite:config   resolve: {
  vite:config     mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
  vite:config     browserField: true,
  vite:config     conditions: [],
  vite:config     extensions: [
  vite:config       '.mjs',  '.js',
  vite:config       '.mts',  '.ts',
  vite:config       '.jsx',  '.tsx',
  vite:config       '.json'
  vite:config     ],
  vite:config     dedupe: [],
  vite:config     preserveSymlinks: false,
  vite:config     alias: [ [Object], [Object] ]
  vite:config   },
  vite:config   publicDir: 'C:\\Projects\\Vite\\vite-project\\public',
  vite:config   cacheDir: 'C:/Projects/Vite/vite-project/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   ssr: {
  vite:config     format: 'esm',
  vite:config     target: 'node',
  vite:config     optimizeDeps: { disabled: true, esbuildOptions: [Object] }
  vite:config   },
  vite:config   isWorker: false,
  vite:config   mainConfig: null,
  vite:config   isProduction: true,
  vite:config   server: {
  vite:config     preTransformRequests: true,
  vite:config     middlewareMode: false,
  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   worker: {
  vite:config     format: 'iife',
  vite:config     plugins: [
  vite:config       'vite:build-metadata',
  vite:config       'vite:pre-alias',
  vite:config       'alias',
  vite:config       'vite:modulepreload-polyfill',
  vite:config       'vite:optimized-deps-build',
  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       'vite:watch-package-data',
  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: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 v4.0.3 building for production...
transforming (1) index.html  vite:deps ✨ static imports crawl ended +0ms
  vite:deps ✨ no dependencies found while crawling the static imports +1ms
transforming (2) vite\modulepreload-polyfill  vite:deps new dependencies found: chart.js/auto +233ms
transforming (3) main.js  vite:deps deps bundled in 81.70ms +88ms
  vite:deps ✨ optimized dependencies unchanged +2ms
  vite:deps new dependencies found: chartjs-plugin-datalabels +32ms
  vite:deps ✨ static imports crawl ended +15ms
  vite:optimize-deps load C:/Projects/Vite/vite-project/node_modules/.vite/deps_build-dist/chart__js_auto.js +0ms
transforming (4) node_modules\.vite\deps_build-dist\chart__js_auto.js  vite:resolve 5.04ms chart.js/helpers -> C:/Projects/Vite/vite-project/node_modules/chart.js/helpers/helpers.js +0ms
  vite:resolve 11.26ms chart.js -> C:/Projects/Vite/vite-project/node_modules/chart.js/dist/chart.js +13ms
  vite:deps deps bundled in 368.88ms +367ms
  vite:optimize-deps load C:/Projects/Vite/vite-project/node_modules/.vite/deps_build-dist/chartjs-plugin-datalabels.js +368ms
11:18:40 [vite] ✨ optimized dependencies changed. reloading
transforming (5) node_modules\.vite\deps_build-dist\chartjs-plugin-datalabels.js  vite:optimize-deps load C:/Projects/Vite/vite-project/node_modules/.vite/deps_build-dist/chunk-SEZPGHND.js +148ms
✓ 6 modules transformed.
dist/index.html                  0.43 kB
dist/assets/index-b364bb35.js  838.55 kB │ gzip: 188.71 kB

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.

[patak-dev]

Fixed by #12851, vite >=4.3.0