fix: json HMR (fixes #9521) (#9610)

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

@@ -69,7 +69,7 @@ const debug = createDebugger('vite:import-analysis')
 
 const clientDir = normalizePath(CLIENT_DIR)
 
-const skipRE = /\.(map|json)$/
+const skipRE = /\.(map|json)($|\?)/
 export const canSkipImportAnalysis = (id: string): boolean =>
   skipRE.test(id) || isDirectCSSRequest(id)
 

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

@@ -231,6 +231,11 @@ function propagateUpdate(
   // if the imports of `node` have not been analyzed, then `node` has not
   // been loaded in the browser and we should stop propagation.
   if (node.id && node.isSelfAccepting === undefined) {
+    debugHmr(
+      `[propagate update] stop propagation because not analyzed: ${colors.dim(
+        node.id
+      )}`
+    )
     return false
   }
 

playground/json/__tests__/json.spec.ts

@@ -1,10 +1,12 @@
 import { readFileSync } from 'node:fs'
 import testJson from '../test.json'
-import { isBuild, page } from '~utils'
+import hmrJson from '../hmr.json'
+import { editFile, isBuild, isServe, page, untilUpdated } from '~utils'
 
 const deepJson = require('vue/package.json')
 const stringified = JSON.stringify(testJson)
 const deepStringified = JSON.stringify(deepJson)
+const hmrStringified = JSON.stringify(hmrJson)
 
 test('default import', async () => {
   expect(await page.textContent('.full')).toBe(stringified)
@@ -45,3 +47,15 @@ test('?raw', async () => {
     readFileSync(require.resolve('../test.json'), 'utf-8')
   )
 })
+
+test.runIf(isServe)('should full reload', async () => {
+  expect(await page.textContent('.hmr')).toBe(hmrStringified)
+
+  editFile('hmr.json', (code) =>
+    code.replace('"this is hmr json"', '"this is hmr update json"')
+  )
+  await untilUpdated(
+    () => page.textContent('.hmr'),
+    '"this is hmr update json"'
+  )
+})

playground/json/hmr.json

@@ -0,0 +1,3 @@
+{
+  "hmr": "this is hmr json"
+}

playground/json/index.html

@@ -25,6 +25,9 @@ <h2>JSON Module</h2>
 <h2>Has BOM Tag</h2>
 <pre class="bom"></pre>
 
+<h2>HMR</h2>
+<pre class="hmr"></pre>
+
 <script type="module">
   import json, { hello } from './test.json'
   import deepJson, { name } from 'vue/package.json'
@@ -58,6 +61,9 @@ <h2>Has BOM Tag</h2>
   import hasBomJson from './json-bom/has-bom.json'
   text('.bom', JSON.stringify(hasBomJson))
 
+  import hmrJSON from './hmr.json'
+  text('.hmr', JSON.stringify(hmrJSON))
+
   function text(sel, text) {
     document.querySelector(sel).textContent = text
   }