fix: fix injection symbol(clientData) failure caused by HMR, close #1715

packages/client/src/composables/clientData.ts

@@ -3,12 +3,37 @@ import { inject } from 'vue'
 
 import type { ClientData } from '../types/index.js'
 
+const CLIENT_DATA_SYMBOL_GLOBAL_KEY = '__VUEPRESS_CLIENT_DATA_SYMBOL__'
+
 /**
  * Injection key for client data
+ *
+ * Use a global Symbol to keep the same reference across module reloads.
+ * This is required for HMR in dev mode: when a markdown page with local
+ * components is edited, the main module (and its transitive deps that host
+ * this symbol) may be re-executed by Vite, which would otherwise create a
+ * new Symbol instance and break `inject` (see vuepress/core#1715).
+ */
+const resolveClientDataSymbol = (): InjectionKey<ClientData> => {
+  const existing = globalThis[
+    CLIENT_DATA_SYMBOL_GLOBAL_KEY
+  ] as InjectionKey<ClientData> | null
+
+  if (existing) return existing
+
+  const symbol: InjectionKey<ClientData> = Symbol('clientData')
+  globalThis[CLIENT_DATA_SYMBOL_GLOBAL_KEY] = symbol
+  return symbol
+}
+
+/**
+ * The problem only occurs during hot updates in the development environment,
+ * It only needs to be processed in the development environment.
+ * (see vuepress/core#1715)
  */
-export const clientDataSymbol: InjectionKey<ClientData> = Symbol(
-  __VUEPRESS_DEV__ ? 'clientData' : '',
-)
+export const clientDataSymbol: InjectionKey<ClientData> = __VUEPRESS_DEV__
+  ? resolveClientDataSymbol()
+  : Symbol('')
 
 /**
  * Returns client data