fix: interop of cjs with_esModule is consistent with rollup

packages/vite/src/node/__tests__/plugins/import.spec.ts

@@ -44,7 +44,7 @@ describe('transformCjsImport', () => {
       ),
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        'const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react',
+        'const React = __vite__cjsImport0_react.__esModule && Object.prototype.hasOwnProperty.call(__vite__cjsImport0_react, "default") ? __vite__cjsImport0_react.default : __vite__cjsImport0_react',
     )
 
     expect(
@@ -58,7 +58,7 @@ describe('transformCjsImport', () => {
       ),
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        'const React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react',
+        'const React = __vite__cjsImport0_react.__esModule && Object.prototype.hasOwnProperty.call(__vite__cjsImport0_react, "default") ? __vite__cjsImport0_react.default : __vite__cjsImport0_react',
     )
   })
 
@@ -74,7 +74,7 @@ describe('transformCjsImport', () => {
       ),
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        `const react = ((m) => m?.__esModule ? m : { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m })(__vite__cjsImport0_react)`,
+        `const react = ((m) => m?.__esModule && Object.prototype.hasOwnProperty.call(m, "default") ? m : { ...typeof m === "object" && !Array.isArray(m) || typeof m === "function" ? m : {}, default: m })(__vite__cjsImport0_react)`,
     )
   })
 
@@ -154,7 +154,7 @@ describe('transformCjsImport', () => {
       ),
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        'const __vite__cjsExportDefault_0 = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
+        'const __vite__cjsExportDefault_0 = __vite__cjsImport0_react.__esModule && Object.prototype.hasOwnProperty.call(__vite__cjsImport0_react, "default") ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
         'export default __vite__cjsExportDefault_0',
     )
 
@@ -169,7 +169,7 @@ describe('transformCjsImport', () => {
       ),
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        'const __vite__cjsExport_React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
+        'const __vite__cjsExport_React = __vite__cjsImport0_react.__esModule && Object.prototype.hasOwnProperty.call(__vite__cjsImport0_react, "default") ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
         'export { __vite__cjsExport_React as React }',
     )
 

packages/vite/src/node/plugins/importAnalysis.ts

@@ -845,7 +845,7 @@ export function createParseErrorInfo(
   }
 }
 // prettier-ignore
-const interopHelper = (m: any) => m?.__esModule ? m : { ...(typeof m === 'object' && !Array.isArray(m) || typeof m === 'function' ? m : {}), default: m }
+const interopHelper = (m: any) => m?.__esModule && Object.prototype.hasOwnProperty.call(m, 'default') ? m : { ...(typeof m === 'object' && !Array.isArray(m) || typeof m === 'function' ? m : {}), default: m }
 
 export function interopNamedImports(
   str: MagicString,
@@ -1010,7 +1010,7 @@ export function transformCjsImport(
         )
       } else if (importedName === 'default') {
         lines.push(
-          `const ${localName} = ${cjsModuleName}.__esModule ? ${cjsModuleName}.default : ${cjsModuleName}`,
+          `const ${localName} = ${cjsModuleName}.__esModule && Object.prototype.hasOwnProperty.call(${cjsModuleName}, "default") ? ${cjsModuleName}.default : ${cjsModuleName}`,
         )
       } else {
         lines.push(`const ${localName} = ${cjsModuleName}["${importedName}"]`)

playground/optimize-deps/cjs-dynamic.js

@@ -28,6 +28,15 @@
     text('.cjs-dynamic-dep-cjs-compiled-from-cjs', 'ok')
   }
 
+  const cjsWithEsModuleTag = await import(
+    '@vitejs/test-dep-cjs-with-es-module-flag'
+  )
+  console.log('cjsWithEsModuleTag', cjsWithEsModuleTag)
+  text(
+    '.cjs-dynamic-dep-cjs-with-es-module-flag',
+    cjsWithEsModuleTag.default.info,
+  )
+
   function App() {
     const [count, setCount] = useState(0)
 

playground/optimize-deps/cjs.js

@@ -5,7 +5,7 @@ import React, { useState } from 'react'
 import ReactDOM from 'react-dom/client'
 import { Socket } from 'phoenix'
 import clip from 'clipboard'
-
+import m from '@vitejs/test-dep-cjs-with-es-module-flag'
 // Test exporting a name that was already imported
 export { useState } from 'react'
 export { useState as anotherNameForUseState } from 'react'
@@ -19,6 +19,8 @@ if (typeof Socket === 'function') {
   text('.cjs-phoenix', 'ok')
 }
 
+text('.cjs-with-es-module-flag', m.info)
+
 function App() {
   const [count, setCount] = useState(0)
 

playground/optimize-deps/dep-cjs-with-es-module-flag/index.js

@@ -0,0 +1,4 @@
+module.exports = {
+  __esModule: true,
+  info: 'ok',
+}

playground/optimize-deps/dep-cjs-with-es-module-flag/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@vitejs/test-dep-cjs-with-es-module-flag",
+  "version": "1.0.0",
+  "main": "index.js"
+}

playground/optimize-deps/index.html

@@ -6,6 +6,8 @@ <h2>CommonJS w/ named imports (phoenix)</h2>
 <div class="cjs-phoenix">fail</div>
 <h2>CommonJS w/ default export (clipboard)</h2>
 <div class="cjs-clipboard">fail</div>
+<h2>CommonJS w/ default export (dep-cjs-with-es-module-flag)</h2>
+<div class="cjs-with-es-module-flag">fail</div>
 
 <script type="module" src="./cjs.js"></script>
 
@@ -19,6 +21,8 @@ <h2>CommonJS dynamic import default (dep-cjs-compiled-from-esm)</h2>
 <div class="cjs-dynamic-dep-cjs-compiled-from-esm"></div>
 <h2>CommonJS dynamic import default (dep-cjs-compiled-from-cjs)</h2>
 <div class="cjs-dynamic-dep-cjs-compiled-from-cjs"></div>
+<h2>CommonJS dynamic import default (dep-cjs-with-es-module-flag)</h2>
+<div class="cjs-dynamic-dep-cjs-with-es-module-flag"></div>
 
 <script type="module" src="./cjs-dynamic.js"></script>
 

playground/optimize-deps/package.json

@@ -36,6 +36,7 @@
     "@vitejs/test-dep-with-optional-peer-dep-submodule": "file:./dep-with-optional-peer-dep-submodule",
     "@vitejs/test-dep-non-optimized": "file:./dep-non-optimized",
     "@vitejs/test-added-in-entries": "file:./added-in-entries",
+    "@vitejs/test-dep-cjs-with-es-module-flag": "file:./dep-cjs-with-es-module-flag",
     "lodash-es": "^4.17.21",
     "@vitejs/test-nested-exclude": "file:./nested-exclude",
     "phoenix": "^1.7.11",

playground/optimize-deps/vite.config.js

@@ -22,6 +22,7 @@ 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-es-module-flag',
     ],
     exclude: ['@vitejs/test-nested-exclude', '@vitejs/test-dep-non-optimized'],
     esbuildOptions: {