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

Co-authored-by: bluwy <bjornlu.dev@gmail.com>
vitejs · Oct 25, 2024 · e51dc40 · e51dc40
1 parent 7f9f8c6
commit e51dc40
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 0 deletions.
diff --git 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
@@ -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 => {