Nest deps chunk cannot be loaded when optimizing deps in build mode

[ChuHoMan]

Describe the bug

Background

Because I have written some esbuild plugins in the project, I need to keep consistency between the build and dev modes. Therefore, I enabled Optimizing dependencies in build mode.

Actually happen

I executed the command "vite build" some exceptions occurred(The logs section can be seen below), which worked fine in dev mode.
After debugging the vite source code, I found the following:

1. My dependencies are dynamic import another dependency, but the "optimizedDepInfoFromFile" function cannot find any information and eventually throws 'Something unexpected happened while optimizing' error.

2. The reason is that the file to be loaded has not been processed by "flattenId," but the files in "depInfoList" have been processed by "flattenId," leading to the inability to locate the file.

3. In dev mode, when the optimizedDepsPlugin fails to find info, it will fallback and load the file from the cache. However, the optimizedDepsBuildPlugin has a similar logic, but it immediately throws an error before using the fallback logic.

4. I have found a workaround, which is to add the following configuration in the vite.config.ts file:

export default defineConfig({
  optimizeDeps: {
    disabled: false,
    // NOTE: workaround,  react-cropper is my nest deps
    include: ['dynamic-import-pkg > react-cropper'],
  },
  plugins: [react()],
  build: {
    // Avoid @rollup/plugin-commonjs
    commonjsOptions: {
      include: [],
    },
  },
});

By doing this, not only init deps with flattenId, but also inesbuild.context entryPoints will get the flatId, which allows them to be correctly loaded.

Expect

Using vite build works fine when I enabled Optimizing dependencies in build mode.

Other contexts

I would like to attempt to resolve this issue by aligning the fallback load logic of optimizedDepsBuildPlugin load hook with the logic used in optimizedDepsPlugin.

Besides, I have other doubts (which might belong to a separate discussion on another issue). I noticed that the file field for the chunks in the .vite/deps/_metadata.json is processed with flattenId. However, the chunk files generated by esbuild on the disk do not undergo the flattenId process. Is this behavior expected?

Reproduction

https://stackblitz.com/edit/vitejs-vite-vttiy9?file=package.json

Steps to reproduce

1. pnpm i
2. pnpm run build

Then can see throw Error.

System Info

System:
    OS: macOS 13.0
    CPU: (12) x64 Apple M2 Pro
    Memory: 22.54 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.15.1/bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
    pnpm: 8.5.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 115.0.5790.102
    Edge: 112.0.1722.39
    Safari: 16.1
  npmPackages:
    @vitejs/plugin-react: ^4.0.3 => 4.0.3 
    vite: ^4.4.6 => 4.4.6

Used Package Manager

pnpm

Logs

Click to expand!

vite v4.4.6 building for production...
Forced re-optimization of dependencies
transforming (1) index.html  vite:optimize-deps load /home/projects/vitejs-vite-vttiy9/node_modules/.vite/deps_build-dist/dynamic-import-pkg.js +0ms
✓ 4 modules transformed.
✓ built in 316ms
[vite:optimized-deps-build] Could not load /home/projects/vitejs-vite-vttiy9/node_modules/.vite/deps_build-dist/react-cropper.es-I3LSTXMD.js (imported by node_modules/.vite/deps_build-dist/dynamic-import-pkg.js): Something unexpected happened while optimizing "/home/projects/vitejs-vite-vttiy9/node_modules/.vite/deps_build-dist/react-cropper.es-I3LSTXMD.js".
error during build:
Error: Could not load /home/projects/vitejs-vite-vttiy9/node_modules/.vite/deps_build-dist/react-cropper.es-I3LSTXMD.js (imported by node_modules/.vite/deps_build-dist/dynamic-import-pkg.js): Something unexpected happened while optimizing "/home/projects/vitejs-vite-vttiy9/node_modules/.vite/deps_build-dist/react-cropper.es-I3LSTXMD.js".
    at Object.load (file:///home/projects/vitejs-vite-vttiy9/node_modules/.pnpm/vite@4.4.6/node_modules/vite/dist/node/chunks/dep-a8e37fae.js:40461:23)
    at eval (file:///home/projects/vitejs-vite-vttiy9/node_modules/.pnpm/rollup@3.26.3/node_modules/rollup/dist/es/shared/node-entry.js:25361:40)
    at async PluginDriver.hookFirstAndGetPlugin (file:///home/projects/vitejs-vite-vttiy9/node_modules/.pnpm/rollup@3.26.3/node_modules/rollup/dist/es/shared/node-entry.js:25261:28)
    at async eval (file:///home/projects/vitejs-vite-vttiy9/node_modules/.pnpm/rollup@3.26.3/node_modules/rollup/dist/es/shared/node-entry.js:24430:75)
    at async Queue.work (file:///home/projects/vitejs-vite-vttiy9/node_modules/.pnpm/rollup@3.26.3/node_modules/rollup/dist/es/shared/node-entry.js:25471:32)
 ELIFECYCLE  Command failed with exit code 1.

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-vttiy9 (Open reproduction)

[hunoz]

Is there an update available for this issue? I am facing this issue when using Cloudscape due to their dynamic imports.

[sapphi-red]

Closing as the build-time dep-optimization is now removed (#15184).