diff --git a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
index 32333059ad7381..292cdb2e861b4b 100644
--- a/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
+++ b/packages/playground/dynamic-import/__tests__/dynamic-import.spec.ts
@@ -20,6 +20,22 @@ test('should load data URL of `data:`', async () => {
await untilUpdated(() => page.textContent('.view'), 'data', true)
})
+test('should have same reference on static and dynamic js import', async () => {
+ await page.click('.mxd')
+ await untilUpdated(() => page.textContent('.view'), 'true', true)
+})
+
+// in this case, it is not possible to detect the correct module
+test('should have same reference on static and dynamic js import', async () => {
+ await page.click('.mxd2')
+ await untilUpdated(() => page.textContent('.view'), 'false', true)
+})
+
+test('should have same reference on static and dynamic js import', async () => {
+ await page.click('.mxdjson')
+ await untilUpdated(() => page.textContent('.view'), 'true', true)
+})
+
// since this test has a timeout, it should be put last so that it
// does not bleed on the last
test('should load dynamic import with vars', async () => {
diff --git a/packages/playground/dynamic-import/index.html b/packages/playground/dynamic-import/index.html
index 87bb6ebdaa37e8..3039d9eadf3c00 100644
--- a/packages/playground/dynamic-import/index.html
+++ b/packages/playground/dynamic-import/index.html
@@ -2,6 +2,9 @@
+
+
+
diff --git a/packages/playground/dynamic-import/mxd.js b/packages/playground/dynamic-import/mxd.js
new file mode 100644
index 00000000000000..ea9b101e1c2259
--- /dev/null
+++ b/packages/playground/dynamic-import/mxd.js
@@ -0,0 +1 @@
+export default function () {}
diff --git a/packages/playground/dynamic-import/mxd.json b/packages/playground/dynamic-import/mxd.json
new file mode 100644
index 00000000000000..9e26dfeeb6e641
--- /dev/null
+++ b/packages/playground/dynamic-import/mxd.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/packages/playground/dynamic-import/nested/index.js b/packages/playground/dynamic-import/nested/index.js
index cc6522016fc1d8..48a7cb7f924c38 100644
--- a/packages/playground/dynamic-import/nested/index.js
+++ b/packages/playground/dynamic-import/nested/index.js
@@ -1,3 +1,6 @@
+import mxdStatic from '../mxd'
+import mxdStaticJSON from '../mxd.json'
+
async function setView(view) {
const { msg } = await import(`../views/${view}.js`)
text('.view', msg)
@@ -21,6 +24,27 @@ document.querySelector('.qux').addEventListener('click', async () => {
text('.view', msg)
})
+// mixed static and dynamic
+document.querySelector('.mxd').addEventListener('click', async () => {
+ const view = 'mxd'
+ const { default: mxdDynamic } = await import(`../${view}.js`)
+ text('.view', mxdStatic === mxdDynamic)
+})
+
+document.querySelector('.mxd2').addEventListener('click', async () => {
+ const test = { jss: '../mxd.js' }
+ const ttest = test
+ const view = 'mxd'
+ const { default: mxdDynamic } = await import(test.jss)
+ text('.view', mxdStatic === mxdDynamic)
+})
+
+document.querySelector('.mxdjson').addEventListener('click', async () => {
+ const view = 'mxd'
+ const { default: mxdDynamicJSON } = await import(`../${view}.json`)
+ text('.view', mxdStaticJSON === mxdDynamicJSON)
+})
+
// data URLs (`blob:`)
const code1 = 'export const msg = "blob"'
const blob = new Blob([code1], { type: 'text/javascript;charset=UTF-8' })
diff --git a/packages/playground/dynamic-import/vite.config.js b/packages/playground/dynamic-import/vite.config.js
index e0fb1f662fd3d0..010e47d6308d30 100644
--- a/packages/playground/dynamic-import/vite.config.js
+++ b/packages/playground/dynamic-import/vite.config.js
@@ -10,6 +10,14 @@ module.exports = {
path.resolve(__dirname, 'qux.js'),
path.resolve(__dirname, 'dist/qux.js')
)
+ fs.copyFileSync(
+ path.resolve(__dirname, 'mxd.js'),
+ path.resolve(__dirname, 'dist/mxd.js')
+ )
+ fs.copyFileSync(
+ path.resolve(__dirname, 'mxd.json'),
+ path.resolve(__dirname, 'dist/mxd.json')
+ )
}
}
]
diff --git a/packages/vite/src/node/plugins/importAnalysis.ts b/packages/vite/src/node/plugins/importAnalysis.ts
index e37b04393bf824..040558b9f79645 100644
--- a/packages/vite/src/node/plugins/importAnalysis.ts
+++ b/packages/vite/src/node/plugins/importAnalysis.ts
@@ -48,8 +48,12 @@ const clientDir = normalizePath(CLIENT_DIR)
const skipRE = /\.(map|json)$/
const canSkip = (id: string) => skipRE.test(id) || isDirectCSSRequest(id)
+function isExplicitImportRequired(url: string) {
+ return !isJSRequest(cleanUrl(url)) && !isCSSRequest(url)
+}
+
function markExplicitImport(url: string) {
- if (!isJSRequest(cleanUrl(url)) && !isCSSRequest(url)) {
+ if (isExplicitImportRequired(url)) {
return injectQuery(url, 'import')
}
return url
@@ -407,8 +411,13 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
`/* @vite-ignore */ comment inside the import() call to suppress this warning.\n`
)
}
- needQueryInjectHelper = true
- str().overwrite(start, end, `__vite__injectQuery(${url}, 'import')`)
+ if (
+ !/^('.*'|".*"|`.*`)$/.test(url) ||
+ isExplicitImportRequired(url.slice(1, -1))
+ ) {
+ needQueryInjectHelper = true
+ str().overwrite(start, end, `__vite__injectQuery(${url}, 'import')`)
+ }
}
}