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')`) + } } }