fix(hmr): duplicated modules because of query params mismatch (fixes #2255)

packages/vite/src/client/client.ts

@@ -388,7 +388,12 @@ export function removeStyle(id: string): void {
   }
 }
 
-async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
+async function fetchUpdate({
+  path,
+  acceptedPath,
+  timestamp,
+  explicitImportRequired
+}: Update) {
   const mod = hotModulesMap.get(path)
   if (!mod) {
     // In a code-splitting project,
@@ -415,7 +420,9 @@ async function fetchUpdate({ path, acceptedPath, timestamp }: Update) {
         /* @vite-ignore */
         base +
           path.slice(1) +
-          `?import&t=${timestamp}${query ? `&${query}` : ''}`
+          `?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${
+            query ? `&${query}` : ''
+          }`
       )
       moduleMap.set(dep, newMod)
     } catch (e) {

packages/vite/src/node/plugins/importAnalysis.ts

@@ -76,7 +76,7 @@ export const canSkipImportAnalysis = (id: string): boolean =>
 const optimizedDepChunkRE = /\/chunk-[A-Z0-9]{8}\.js/
 const optimizedDepDynamicRE = /-[A-Z0-9]{8}\.js/
 
-function isExplicitImportRequired(url: string) {
+export function isExplicitImportRequired(url: string): boolean {
   return !isJSRequest(cleanUrl(url)) && !isCSSRequest(url)
 }
 

packages/vite/src/node/server/hmr.ts

@@ -9,6 +9,7 @@ import { createDebugger, normalizePath, unique } from '../utils'
 import type { ViteDevServer } from '..'
 import { isCSSRequest } from '../plugins/css'
 import { getAffectedGlobModules } from '../plugins/importMetaGlob'
+import { isExplicitImportRequired } from '../plugins/importAnalysis'
 import type { ModuleNode } from './moduleGraph'
 
 export const debugHmr = createDebugger('vite:hmr')
@@ -151,9 +152,13 @@ export function updateModules(
 
     updates.push(
       ...[...boundaries].map(({ boundary, acceptedVia }) => ({
-        type: `${boundary.type}-update` as Update['type'],
+        type: `${boundary.type}-update` as const,
         timestamp,
         path: boundary.url,
+        explicitImportRequired:
+          boundary.type === 'js'
+            ? isExplicitImportRequired(acceptedVia.url)
+            : undefined,
         acceptedPath: acceptedVia.url
       }))
     )

packages/vite/types/hmrPayload.d.ts

@@ -20,6 +20,10 @@ export interface Update {
   path: string
   acceptedPath: string
   timestamp: number
+  /**
+   * @internal
+   */
+  explicitImportRequired: boolean | undefined
 }
 
 export interface PrunePayload {

playground/hmr/__tests__/hmr.spec.ts

@@ -218,6 +218,32 @@ if (!isBuild) {
     expect(await btn.textContent()).toBe('Counter 1')
   })
 
+  // #2255
+  test('importing reloaded', async () => {
+    await page.goto(viteTestUrl)
+    const outputEle = await page.$('.importing-reloaded')
+    const getOutput = () => {
+      return outputEle.innerHTML()
+    }
+
+    await untilUpdated(getOutput, ['a.js: a0', 'b.js: b0,a0'].join('<br>'))
+
+    editFile('importing-updated/a.js', (code) => code.replace("'a0'", "'a1'"))
+    await untilUpdated(
+      getOutput,
+      ['a.js: a0', 'b.js: b0,a0', 'a.js: a1'].join('<br>')
+    )
+
+    editFile('importing-updated/b.js', (code) =>
+      code.replace('`b0,${a}`', '`b1,${a}`')
+    )
+    // note that "a.js: a1" should not happen twice after "b.js: b0,a0'"
+    await untilUpdated(
+      getOutput,
+      ['a.js: a0', 'b.js: b0,a0', 'a.js: a1', 'b.js: b1,a1'].join('<br>')
+    )
+  })
+
   describe('acceptExports', () => {
     const HOT_UPDATED = /hot updated/
     const CONNECTED = /connected/

playground/hmr/hmr.ts

@@ -1,4 +1,5 @@
 import { foo as depFoo, nestedFoo } from './hmrDep'
+import './importing-updated'
 
 export const foo = 1
 text('.app', foo)

playground/hmr/importing-updated/a.js

@@ -0,0 +1,8 @@
+const val = 'a0'
+document.querySelector('.importing-reloaded').innerHTML += `a.js: ${val}<br>`
+
+export default val
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}

playground/hmr/importing-updated/b.js

@@ -0,0 +1,8 @@
+import a from './a.js'
+
+const val = `b0,${a}`
+document.querySelector('.importing-reloaded').innerHTML += `b.js: ${val}<br>`
+
+if (import.meta.hot) {
+  import.meta.hot.accept()
+}

playground/hmr/importing-updated/index.js

@@ -0,0 +1,2 @@
+import './a'
+import './b'

playground/hmr/index.html

@@ -25,3 +25,4 @@
 <div class="link-tag-added">no</div>
 <div class="link-tag-removed">no</div>
 <div class="import-image"></div>
+<div class="importing-reloaded"></div>