feat: read sec-fetch-dest header to detect JS in transform (#9981)

Co-authored-by: bluwy <[email protected]>

Author: jonaskuske

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) ||

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 => {