diff --git a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
index 463cc53e521cec..78e0493dea3f85 100644
--- a/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
+++ b/packages/vite/src/node/optimizer/esbuildDepPlugin.ts
@@ -17,6 +17,9 @@ const externalWithConversionNamespace =
'vite:dep-pre-bundle:external-conversion'
const convertedExternalPrefix = 'vite-dep-pre-bundle-external:'
+const cjsExternalFacadeNamespace = 'vite:cjs-external-facade'
+const nonFacadePrefix = 'vite-cjs-external-facade:'
+
const externalTypes = [
'css',
// supported pre-processor types
@@ -270,19 +273,38 @@ export function esbuildCjsExternalPlugin(externals: string[]): Plugin {
`^${text.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')}$`
const filter = new RegExp(externals.map(escape).join('|'))
- build.onResolve({ filter: /.*/, namespace: 'external' }, (args) => ({
- path: args.path,
- external: true
- }))
+ build.onResolve({ filter: new RegExp(`^${nonFacadePrefix}`) }, (args) => {
+ return {
+ path: args.path.slice(nonFacadePrefix.length),
+ external: true
+ }
+ })
+
+ build.onResolve({ filter }, (args) => {
+ if (args.kind === 'require-call') {
+ return {
+ path: args.path,
+ namespace: cjsExternalFacadeNamespace
+ }
+ }
- build.onResolve({ filter }, (args) => ({
- path: args.path,
- namespace: 'external'
- }))
+ return {
+ path: args.path,
+ external: true
+ }
+ })
- build.onLoad({ filter: /.*/, namespace: 'external' }, (args) => ({
- contents: `export * from ${JSON.stringify(args.path)}`
- }))
+ build.onLoad(
+ { filter: /.*/, namespace: cjsExternalFacadeNamespace },
+ (args) => ({
+ contents:
+ `import * as m from ${JSON.stringify(
+ nonFacadePrefix + args.path
+ )};` +
+ `export default m.default;` +
+ `export * from ${JSON.stringify(nonFacadePrefix + args.path)};`
+ })
+ )
}
}
}
diff --git a/playground/external/__tests__/external.spec.ts b/playground/external/__tests__/external.spec.ts
index 029ffc8422a3ba..100eceaebc3418 100644
--- a/playground/external/__tests__/external.spec.ts
+++ b/playground/external/__tests__/external.spec.ts
@@ -7,6 +7,11 @@ test('importmap', () => {
)
})
+test('should have default exports', async () => {
+ expect(await page.textContent('#imported-slash-exists')).toBe('true')
+ expect(await page.textContent('#required-slash-exists')).toBe('true')
+})
+
describe.runIf(isBuild)('build', () => {
test('should externalize imported packages', async () => {
// If `vue` is successfully externalized, the page should use the version from the import map
diff --git a/playground/external/dep-that-imports-vue/index.js b/playground/external/dep-that-imports/index.js
similarity index 51%
rename from playground/external/dep-that-imports-vue/index.js
rename to playground/external/dep-that-imports/index.js
index aa79957e9b3b49..a7888d2af338c6 100644
--- a/playground/external/dep-that-imports-vue/index.js
+++ b/playground/external/dep-that-imports/index.js
@@ -1,3 +1,5 @@
import { version } from 'vue'
+import slash from 'slash'
document.querySelector('#imported-vue-version').textContent = version
+document.querySelector('#imported-slash-exists').textContent = !!slash
diff --git a/playground/external/dep-that-imports-vue/package.json b/playground/external/dep-that-imports/package.json
similarity index 59%
rename from playground/external/dep-that-imports-vue/package.json
rename to playground/external/dep-that-imports/package.json
index eb5996dc7c44ef..587aaf4409c1da 100644
--- a/playground/external/dep-that-imports-vue/package.json
+++ b/playground/external/dep-that-imports/package.json
@@ -1,8 +1,9 @@
{
- "name": "@vitejs/dep-that-imports-vue",
+ "name": "@vitejs/dep-that-imports",
"private": true,
"version": "0.0.0",
"dependencies": {
+ "slash": "^5.0.0",
"vue": "^3.2.41"
}
}
diff --git a/playground/external/dep-that-requires-vue/index.js b/playground/external/dep-that-requires-vue/index.js
deleted file mode 100644
index 0b573021a00b57..00000000000000
--- a/playground/external/dep-that-requires-vue/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const { version } = require('vue')
-
-document.querySelector('#required-vue-version').textContent = version
diff --git a/playground/external/dep-that-requires/index.js b/playground/external/dep-that-requires/index.js
new file mode 100644
index 00000000000000..aef4e3fa7359a5
--- /dev/null
+++ b/playground/external/dep-that-requires/index.js
@@ -0,0 +1,5 @@
+const { version } = require('vue')
+const { default: slash } = require('slash')
+
+document.querySelector('#required-vue-version').textContent = version
+document.querySelector('#required-slash-exists').textContent = !!slash
diff --git a/playground/external/dep-that-requires-vue/package.json b/playground/external/dep-that-requires/package.json
similarity index 59%
rename from playground/external/dep-that-requires-vue/package.json
rename to playground/external/dep-that-requires/package.json
index 90c7881c380b11..f78391a056e1f1 100644
--- a/playground/external/dep-that-requires-vue/package.json
+++ b/playground/external/dep-that-requires/package.json
@@ -1,8 +1,9 @@
{
- "name": "@vitejs/dep-that-requires-vue",
+ "name": "@vitejs/dep-that-requires",
"private": true,
"version": "0.0.0",
"dependencies": {
+ "slash": "^5.0.0",
"vue": "^3.2.41"
}
}
diff --git a/playground/external/index.html b/playground/external/index.html
index 66a16c329c1fc5..1fcedbf2d64ae3 100644
--- a/playground/external/index.html
+++ b/playground/external/index.html
@@ -7,7 +7,8 @@
@@ -15,6 +16,8 @@
Imported Vue version:
Required Vue version:
+ Imported slash exists:
+ Required slash exists: