esbuild Pre-Bundling vs Rollup Build: Keeping Vite Dev and Production Aligned

Answer

The documented option pairing that aims to keep CommonJS/ESM interop identical between Vite’s dev (esbuild) and production (Rollup) pipelines is:

• optimizeDeps.esbuildOptions.plugins – add an esbuild‑compatible CommonJS plugin (e.g., esbuild-plugin-commonjs or @jsdevtools/rollup-plugin-commonjs-esbuild) and configure its options to match the Rollup side.
• build.rollupOptions.plugins – insert @rollup/plugin-commonjs (or ensure it is present) with the same options.
• build.commonjsOptions – pass the matching options that the Rollup commonjs plugin receives.

When these three surfaces are mirrored, Vite attempts to apply the same CJS→ESM transformation logic in both the esbuild pre‑bundling step and the Rollup production build.

Confirmed Facts (from Vite documentation)

1. Dev‑side dependency pre‑bundling is controlled via optimizeDeps (include/exclude and esbuildOptions).
2. Production‑side bundling is controlled via build.rollupOptions (especially plugins for @rollup/plugin-commonjs) and build.commonjsOptions.
3. Vite’s official guidance recommends using ESM‑only dependencies as the simplest way to achieve dev/prod parity, because then both pipelines handle the same module format without extra interop translation.
4. While Vite supports mixed CJS/ESM packages, it does not guarantee identical resolution between the esbuild and Rollup paths; alignment requires explicit, version‑specific tuning of the option pair described above.
5. Defaults for these options have shifted between Vite 5 and Vite 6 (e.g., internal Rollup commonjs plugin version and esbuild target), so the exact plugin names and option shapes must be checked against the documentation for the pinned Vite version.

Steps to Align the Pipelines (for a given Vite version)

1. Determine the exact Vite version you are using (e.g., 5.x or 6.x).
2. Consult the Vite docs for that version to confirm the recommended esbuild‑compatible CommonJS plugin and its option shape.
3. In vite.config.js, under optimizeDeps.esbuildOptions.plugins, add the plugin and mirror the options you intend to use on the Rollup side.
4. Under build.rollupOptions.plugins, ensure @rollup/plugin-commonjs is present with the same options.
5. Set build.commonjsOptions to those matching options.
6. Restart the dev server and run vite build followed by vite preview.
7. Verify consistency: use vite-plugin-inspect or check the browser console/network for warnings about missing exports or CommonJS interop; the output should be identical in dev serve and preview.

Missing Diagnostic Detail

To finalize the recommendation, please confirm which Vite major version (5 or 6) your project is pinned to, as the plugin names and default options differ between those releases and affect the exact configuration needed.