fix(scan): handle html script tag attributes that contain ">" (#13101)

packages/vite/src/node/optimizer/scan.ts

@@ -246,9 +246,8 @@ function globEntries(pattern: string | string[], config: ResolvedConfig) {
   })
 }
 
-const scriptModuleRE =
-  /(<script\b[^>]+type\s*=\s*(?:"module"|'module')[^>]*>)(.*?)<\/script>/gis
-export const scriptRE = /(<script(?:\s[^>]*>|>))(.*?)<\/script>/gis
+export const scriptRE =
+  /(<script(?:\s+[a-z_:][-\w:]*(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^"'<>=\s]+))?)*\s*>)(.*?)<\/script>/gis
 export const commentRE = /<!--.*?-->/gs
 const srcRE = /\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/i
 const typeRE = /\btype\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s'">]+))/i
@@ -378,12 +377,11 @@ function esbuildScanPlugin(
           // Avoid matching the content of the comment
           raw = raw.replace(commentRE, '<!---->')
           const isHtml = path.endsWith('.html')
-          const regex = isHtml ? scriptModuleRE : scriptRE
-          regex.lastIndex = 0
+          scriptRE.lastIndex = 0
           let js = ''
           let scriptId = 0
           let match: RegExpExecArray | null
-          while ((match = regex.exec(raw))) {
+          while ((match = scriptRE.exec(raw))) {
             const [, openTag, content] = match
             const typeMatch = openTag.match(typeRE)
             const type =
@@ -391,6 +389,10 @@ function esbuildScanPlugin(
             const langMatch = openTag.match(langRE)
             const lang =
               langMatch && (langMatch[1] || langMatch[2] || langMatch[3])
+            // skip non type module script
+            if (isHtml && type !== 'module') {
+              continue
+            }
             // skip type="application/ld+json" and other non-JS types
             if (
               type &&

playground/optimize-deps/generics.vue

@@ -0,0 +1,22 @@
+<!--
+https://github.com/vuejs/core/issues/8171
+https://github.com/vitejs/vite-plugin-vue/issues/162
+generic attribute includes angle brackets which breaks scanning
+This file only verifies that the scanner can work with such usage and nothing
+else.
+-->
+
+<script lang="ts">
+export class Item<TValue> {
+  value: TValue
+}
+</script>
+
+<script setup lang="ts" generic="TItem extends Item<TValue>, TValue">
+defineProps<{
+  items: TItem[]
+  modelValue: TItem[]
+}>()
+</script>
+
+<template>{{ items }}</template>

playground/optimize-deps/index.html

@@ -165,6 +165,7 @@
   )
 
   import './index.astro'
+  import './generics.vue'
 
   // All these imports should end up resolved to the same URL (same ?v= injected on them)
   import { add as addFromDirectAbsolutePath } from '/node_modules/@vitejs/test-dep-non-optimized/index.js'

playground/optimize-deps/vite.config.js

@@ -121,6 +121,11 @@ export default defineComponent({
 `.trim(),
         }
       }
+
+      // fallback to empty module for other vue files
+      if (id.endsWith('.vue')) {
+        return { code: `export default {}` }
+      }
     },
   }
 }