fix: A static and dynamically imported module is loaded twice (#2935)

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

packages/playground/dynamic-import/index.html

@@ -2,6 +2,9 @@
 <button class="bar">Bar</button>
 <button class="baz">Baz</button>
 <button class="qux">Qux</button>
+<button class="mxd">Mxd</button>
+<button class="mxd2">Mxd2</button>
+<button class="mxdjson">Mxdjson</button>
 <button class="issue-2658-1">Issue 2658 - 1</button>
 <button class="issue-2658-2">Issue 2658 - 2</button>
 

packages/playground/dynamic-import/mxd.js

@@ -0,0 +1 @@
+export default function () {}

packages/playground/dynamic-import/mxd.json

@@ -0,0 +1 @@
+{}

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

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

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