From 2185f7236e91361304b197de8c9b84b66511be73 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Wed, 6 Jul 2022 16:07:54 +0200
Subject: [PATCH] fix: cjs interop export names local clash, fix #8950 (#8953)

---
 .../src/node/__tests__/plugins/import.spec.ts    | 16 ++++++++--------
 packages/vite/src/node/plugins/importAnalysis.ts |  8 ++++++--
 playground/alias/index.html                      |  2 ++
 playground/optimize-deps/cjs.js                  |  5 +++++
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/vite/src/node/__tests__/plugins/import.spec.ts b/packages/vite/src/node/__tests__/plugins/import.spec.ts
index d7320a70094a4d..6c1f950da4f7f2 100644
--- a/packages/vite/src/node/__tests__/plugins/import.spec.ts
+++ b/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(
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index 94105bc58a5db8..bf2ff5c07e760c 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/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}`)
         }
       }
     }
diff --git a/playground/alias/index.html b/playground/alias/index.html
index 909aaf6ef5411e..32a2fd171fc2b8 100644
--- a/playground/alias/index.html
+++ b/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>
 
diff --git a/playground/optimize-deps/cjs.js b/playground/optimize-deps/cjs.js
index 53da284e0dc8d2..9a4651d6ad4008 100644
--- a/playground/optimize-deps/cjs.js
+++ b/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')
 }