diff --git a/packages/vite/src/node/server/middlewares/transform.ts b/packages/vite/src/node/server/middlewares/transform.ts
index d2cb48ef80acd0..402ef4f4cb632a 100644
--- a/packages/vite/src/node/server/middlewares/transform.ts
+++ b/packages/vite/src/node/server/middlewares/transform.ts
@@ -175,6 +175,7 @@ export function transformMiddleware(
       }
 
       if (
+        req.headers['sec-fetch-dest'] === 'script' ||
         isJSRequest(url) ||
         isImportRequest(url) ||
         isCSSRequest(url) ||
diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts
index 62ec7da873efe5..fa50fc882e566e 100644
--- a/packages/vite/src/node/utils.ts
+++ b/packages/vite/src/node/utils.ts
@@ -271,6 +271,9 @@ export const isDataUrl = (url: string): boolean => dataUrlRE.test(url)
 export const virtualModuleRE = /^virtual-module:.*/
 export const virtualModulePrefix = 'virtual-module:'
 
+// NOTE: We should start relying on the "Sec-Fetch-Dest" header instead of this
+// hardcoded list. We can eventually remove this function when the minimum version
+// of browsers we support in dev all support this header.
 const knownJsSrcRE =
   /\.(?:[jt]sx?|m[jt]s|vue|marko|svelte|astro|imba|mdx)(?:$|\?)/
 export const isJSRequest = (url: string): boolean => {