fix(optimizer): return plain object when using require to import externals in optimized dependencies

packages/vite/src/node/optimizer/esbuildDepPlugin.ts

@@ -339,7 +339,7 @@ export function esbuildCjsExternalPlugin(
           contents:
             `import * as m from ${JSON.stringify(
               nonFacadePrefix + args.path,
-            )};` + `module.exports = m;`,
+            )};` + `module.exports = { ...m };`,
         }),
       )
     },

playground/optimize-deps/__tests__/optimize-deps.spec.ts

@@ -352,3 +352,9 @@ test('external package name with asset extension', async () => {
     page.textContent('.dep-with-asset-ext-prebundled'),
   ).toBe(String(isServe))
 })
+
+test('dependency with external sub-dependency', async () => {
+  await expectWithRetry(() =>
+    page.textContent('.dep-cjs-with-external-dep'),
+  ).toBe('ok')
+})

playground/optimize-deps/dep-cjs-with-external-dep/index.js

@@ -0,0 +1,4 @@
+const external = require('@vitejs/test-dep-esm-external')
+// eslint-disable-next-line no-prototype-builtins
+const result = external.hasOwnProperty('foo') ? 'ok' : 'error'
+module.exports = { result }

playground/optimize-deps/dep-cjs-with-external-dep/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@vitejs/test-dep-cjs-with-external-dep",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js",
+  "dependencies": {
+    "@vitejs/test-dep-esm-external": "file:../dep-esm-external"
+  }
+}

playground/optimize-deps/dep-esm-external/index.js

@@ -0,0 +1,3 @@
+export function foo() {
+  return 'foo'
+}

playground/optimize-deps/dep-esm-external/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@vitejs/test-dep-esm-external",
+  "private": true,
+  "version": "0.0.0",
+  "main": "index.js",
+  "type": "module"
+}

playground/optimize-deps/index.html

@@ -305,3 +305,13 @@ <h2>Pre-bundle transitive dependency 'some-package.pdf'</h2>
   import * as sub from '@vitejs/test-dep-source-map-no-sources/sub.js'
   import * as all from '@vitejs/test-dep-source-map-no-sources/all.js'
 </script>
+
+<h2>Pre-bundle dependency with external sub-dependency</h2>
+<div>
+  require('some-external-sub-dependency') returns a plain object:
+  <span class="dep-cjs-with-external-dep">???</span>
+</div>
+<script type="module">
+  import * as optimized from '@vitejs/test-dep-cjs-with-external-dep'
+  text('.dep-cjs-with-external-dep', optimized.result)
+</script>

playground/optimize-deps/package.json

@@ -18,6 +18,7 @@
     "@vitejs/test-dep-cjs-compiled-from-cjs": "file:./dep-cjs-compiled-from-cjs",
     "@vitejs/test-dep-cjs-compiled-from-esm": "file:./dep-cjs-compiled-from-esm",
     "@vitejs/test-dep-cjs-with-assets": "file:./dep-cjs-with-assets",
+    "@vitejs/test-dep-cjs-with-external-dep": "file:./dep-cjs-with-external-dep",
     "@vitejs/test-dep-css-require": "file:./dep-css-require",
     "@vitejs/test-dep-esbuild-plugin-transform": "file:./dep-esbuild-plugin-transform",
     "@vitejs/test-dep-incompatible": "file:./dep-incompatible",

playground/optimize-deps/vite.config.js

@@ -23,8 +23,13 @@ export default defineConfig({
       '@vitejs/test-dep-optimize-exports-with-glob/**/*',
       '@vitejs/test-dep-optimize-exports-with-root-glob/**/*.js',
       '@vitejs/test-dep-optimize-with-glob/**/*.js',
+      '@vitejs/test-dep-cjs-with-external-dep',
+    ],
+    exclude: [
+      '@vitejs/test-nested-exclude',
+      '@vitejs/test-dep-non-optimized',
+      '@vitejs/test-dep-esm-external',
     ],
-    exclude: ['@vitejs/test-nested-exclude', '@vitejs/test-dep-non-optimized'],
     esbuildOptions: {
       plugins: [
         {