fix: handle tsconfig watching without watchChange as tsconfig files are not modules that pass through it

Author: dominikg

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

@@ -17,8 +17,9 @@ import {
   createFilter,
   ensureWatchedFile,
   generateCodeFrame,
+  normalizePath,
 } from '../utils'
-import type { ViteDevServer } from '../server'
+
 import type { ResolvedConfig } from '../config'
 import type { Plugin } from '../plugin'
 import { cleanUrl } from '../../shared/utils'
@@ -251,52 +252,44 @@ export function esbuildPlugin(config: ResolvedConfig): Plugin {
     },
   }
 
-  let server: ViteDevServer
-
   return {
     name: 'vite:esbuild',
-    configureServer(_server) {
-      server = _server
-    },
-    watchChange(id) {
-      // any tsconfig.json that's added in the workspace could be closer to a code file than a previously cached one
-      // any json file in the tsconfig cache could have been used to compile ts
-      if (
-        path.basename(id) === 'tsconfig.json' ||
-        id.endsWith('.json') /*
-        TODO: the tsconfckCache?.clear() line will make this fail if there are several servers
-              we may need a cache per server if we don't want all servers to share the reset
-              leaving it commented for now because it should still work
-        && tsconfckCache?.hasParseResult(changedFile)
-        */
-      ) {
-        server.config.logger.info(
-          `changed tsconfig file detected: ${id} - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.`,
-          { clear: server.config.clearScreen, timestamp: true },
-        )
-
-        // TODO: more finegrained invalidation than the nuclear option below
-
-        // clear module graph to remove code compiled with outdated config
-        for (const environment of Object.values(server.environments)) {
-          environment.moduleGraph.invalidateAll()
-        }
-
-        // reset tsconfck cache so that recompile works with up2date configs
-        tsconfckCache?.clear()
-
-        // reload environments
-        for (const environment of Object.values(server.environments)) {
-          environment.hot.send({
-            type: 'full-reload',
-            path: '*',
-          })
+    configureServer(server) {
+      server.watcher.on('all', (event, file) => {
+        if (
+          (event === 'add' || event === 'change' || event === 'unlink') &&
+          file.slice(-5) === '.json'
+        ) {
+          const filename = normalizePath(file)
+          if (
+            filename.slice(-14) === '/tsconfig.json' ||
+            tsconfckCache?.hasParseResult(filename)
+          ) {
+            server.config.logger.info(
+              `changed tsconfig file detected: ${filename} - Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values.`,
+              { clear: server.config.clearScreen, timestamp: true },
+            )
+
+            // TODO: more finegrained invalidation than the nuclear option below
+
+            // clear module graph to remove code compiled with outdated config
+            for (const environment of Object.values(server.environments)) {
+              environment.moduleGraph.invalidateAll()
+            }
+
+            // reset tsconfck cache so that recompile works with up2date configs
+            tsconfckCache?.clear()
+
+            // reload environments
+            for (const environment of Object.values(server.environments)) {
+              environment.hot.send({
+                type: 'full-reload',
+                path: '*',
+              })
+            }
+          }
         }
-      }
-    },
-    buildEnd() {
-      // recycle serve to avoid preventing Node self-exit (#6815)
-      server = null as any
+      })
     },
     async transform(code, id) {
       if (filter(id) || filter(cleanUrl(id))) {