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 @@

Alias

// 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(() => {})) 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') }