fix(client): correctly display the config file name (#14160)

vitejs · Aug 21, 2023 · 61e801d · 61e801d
1 parent 632385c
commit 61e801d
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/vite/src/client/overlay.ts b/packages/vite/src/client/overlay.ts
@@ -2,7 +2,9 @@ import type { ErrorPayload } from 'types/hmrPayload'
 
 // injected by the hmr plugin when served
 declare const __BASE__: string
+declare const __HMR_CONFIG_NAME__: string
 
+const hmrConfigName = __HMR_CONFIG_NAME__
 const base = __BASE__ || '/'
 
 // set :host styles to make playwright detect the element as visible
@@ -142,7 +144,7 @@ kbd {
     <div class="tip" part="tip">
       Click outside, press <kbd>Esc</kbd> key, or fix the code to dismiss.<br>
       You can also disable this overlay by setting
-      <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">vite.config.js.</code>
+      <code part="config-option-name">server.hmr.overlay</code> to <code part="config-option-value">false</code> in <code part="config-file-name">${hmrConfigName}.</code>
     </div>
   </div>
 </div>

diff --git a/packages/vite/src/node/plugins/clientInjections.ts b/packages/vite/src/node/plugins/clientInjections.ts
@@ -35,6 +35,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
       const timeout = hmrConfig?.timeout || 30000
       const overlay = hmrConfig?.overlay !== false
       const isHmrServerSpecified = !!hmrConfig?.server
+      const hmrConfigName = path.basename(config.configFile || 'vite.config.js')
 
       // hmr.clientPort -> hmr.port
       // -> (24678 if middleware mode and HMR server is not specified) -> new URL(import.meta.url).port
@@ -65,6 +66,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
       const hmrBaseReplacement = escapeReplacement(hmrBase)
       const hmrTimeoutReplacement = escapeReplacement(timeout)
       const hmrEnableOverlayReplacement = escapeReplacement(overlay)
+      const hmrConfigNameReplacement = escapeReplacement(hmrConfigName)
 
       injectConfigValues = (code: string) => {
         return code
@@ -79,6 +81,7 @@ export function clientInjectionsPlugin(config: ResolvedConfig): Plugin {
           .replace(`__HMR_BASE__`, hmrBaseReplacement)
           .replace(`__HMR_TIMEOUT__`, hmrTimeoutReplacement)
           .replace(`__HMR_ENABLE_OVERLAY__`, hmrEnableOverlayReplacement)
+          .replace(`__HMR_CONFIG_NAME__`, hmrConfigNameReplacement)
       }
     },
     transform(code, id, options) {