fix: cjs interop export names local clash, fix #8950 (#8953)

Author: patak-dev

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

@@ -70,9 +70,9 @@ describe('transformCjsImport', () => {
       )
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        'const useState = __vite__cjsImport0_react["useState"]; ' +
-        'const Component = __vite__cjsImport0_react["Component"]; ' +
-        'export { useState, Component }'
+        'const __vite__cjsExport_useState = __vite__cjsImport0_react["useState"]; ' +
+        'const __vite__cjsExport_Component = __vite__cjsImport0_react["Component"]; ' +
+        'export { __vite__cjsExport_useState as useState, __vite__cjsExport_Component as Component }'
     )
 
     expect(
@@ -84,9 +84,9 @@ describe('transformCjsImport', () => {
       )
     ).toBe(
       'import __vite__cjsImport0_react from "./node_modules/.vite/deps/react.js"; ' +
-        'const useStateAlias = __vite__cjsImport0_react["useState"]; ' +
-        'const ComponentAlias = __vite__cjsImport0_react["Component"]; ' +
-        'export { useStateAlias, ComponentAlias }'
+        'const __vite__cjsExport_useStateAlias = __vite__cjsImport0_react["useState"]; ' +
+        'const __vite__cjsExport_ComponentAlias = __vite__cjsImport0_react["Component"]; ' +
+        'export { __vite__cjsExport_useStateAlias as useStateAlias, __vite__cjsExport_ComponentAlias as ComponentAlias }'
     )
   })
 
@@ -108,8 +108,8 @@ 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; ' +
-        'export { React }'
+        'const __vite__cjsExport_React = __vite__cjsImport0_react.__esModule ? __vite__cjsImport0_react.default : __vite__cjsImport0_react; ' +
+        'export { __vite__cjsExport_React as React }'
     )
 
     expect(

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

@@ -824,6 +824,7 @@ export function transformCjsImport(
         spec.exported.type === 'Identifier'
       ) {
         // for ExportSpecifier, local name is same as imported name
+        // prefix the variable name to avoid clashing with other local variables
         const importedName = spec.local.name
         // we want to specify exported name as variable and re-export it
         const exportedName = spec.exported.name
@@ -833,8 +834,11 @@ export function transformCjsImport(
           )
           importNames.push({ importedName, localName: defaultExports })
         } else {
-          importNames.push({ importedName, localName: exportedName })
-          exportNames.push(exportedName)
+          const localName = makeLegalIdentifier(
+            `__vite__cjsExport_${exportedName}`
+          )
+          importNames.push({ importedName, localName })
+          exportNames.push(`${localName} as ${exportedName}`)
         }
       }
     }

playground/alias/index.html

@@ -45,6 +45,8 @@ <h1>Alias</h1>
 
   // aliased to an absolute URL in CJS, should be optimized
   import { isFunction } from '@vue/shared'
+  // also check name clash for aliased deps
+  export { isFunction } from '@vue/shared'
   console.log(isFunction(() => {}))
 </script>
 

playground/optimize-deps/cjs.js

@@ -6,6 +6,11 @@ import ReactDOM from 'react-dom/client'
 import { Socket } from 'phoenix'
 import clip from 'clipboard'
 
+// Test exporting a name that was already imported
+export { useState } from 'react'
+export { useState as anotherNameForUseState } from 'react'
+export { default as React } from 'react'
+
 if (typeof clip === 'function') {
   text('.cjs-clipboard', 'ok')
 }