From ab887d90d71ea0d4e977574263d3b8a112f07cef Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 13 Jun 2024 14:44:08 +0100
Subject: [PATCH] fix(nuxt): handle tsx code when extracting
 pageMeta/routeRules (#27583)

---
 packages/nuxt/src/pages/route-rules.ts      |  5 +++--
 packages/nuxt/src/pages/utils.ts            | 15 +++++++++------
 test/fixtures/basic/pages/tsx-page-meta.vue |  9 +++++++++
 3 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 test/fixtures/basic/pages/tsx-page-meta.vue

diff --git a/packages/nuxt/src/pages/route-rules.ts b/packages/nuxt/src/pages/route-rules.ts
index fef075e03e..24acf217b1 100644
--- a/packages/nuxt/src/pages/route-rules.ts
+++ b/packages/nuxt/src/pages/route-rules.ts
@@ -18,11 +18,12 @@ export async function extractRouteRules (code: string): Promise<NitroRouteConfig
   }
   if (!ROUTE_RULE_RE.test(code)) { return null }
 
-  code = extractScriptContent(code) || code
+  const script = extractScriptContent(code)
+  code = script?.code || code
 
   let rule: NitroRouteConfig | null = null
 
-  const js = await transform(code, { loader: 'ts' })
+  const js = await transform(code, { loader: script?.loader || 'ts' })
   walk(parse(js.code, {
     sourceType: 'module',
     ecmaVersion: 'latest',
diff --git a/packages/nuxt/src/pages/utils.ts b/packages/nuxt/src/pages/utils.ts
index 78080c97cc..63bb9cacf9 100644
--- a/packages/nuxt/src/pages/utils.ts
+++ b/packages/nuxt/src/pages/utils.ts
@@ -154,12 +154,15 @@ export async function augmentPages (routes: NuxtPage[], vfs: Record<string, stri
   return augmentedPages
 }
 
-const SFC_SCRIPT_RE = /<script[^>]*>([\s\S]*?)<\/script[^>]*>/i
+const SFC_SCRIPT_RE = /<script(?<attrs>[^>]*)>(?<content>[\s\S]*?)<\/script[^>]*>/i
 export function extractScriptContent (html: string) {
-  const match = html.match(SFC_SCRIPT_RE)
+  const groups = html.match(SFC_SCRIPT_RE)?.groups || {}
 
-  if (match && match[1]) {
-    return match[1].trim()
+  if (groups.content) {
+    return {
+      loader: groups.attrs.includes('tsx') ? 'tsx' : 'ts',
+      code: groups.content.trim(),
+    } as const
   }
 
   return null
@@ -185,12 +188,12 @@ async function getRouteMeta (contents: string, absolutePath: string): Promise<Pa
     return {}
   }
 
-  if (!PAGE_META_RE.test(script)) {
+  if (!PAGE_META_RE.test(script.code)) {
     metaCache[absolutePath] = {}
     return {}
   }
 
-  const js = await transform(script, { loader: 'ts' })
+  const js = await transform(script.code, { loader: script.loader })
   const ast = parse(js.code, {
     sourceType: 'module',
     ecmaVersion: 'latest',
diff --git a/test/fixtures/basic/pages/tsx-page-meta.vue b/test/fixtures/basic/pages/tsx-page-meta.vue
new file mode 100644
index 0000000000..80a36dcaff
--- /dev/null
+++ b/test/fixtures/basic/pages/tsx-page-meta.vue
@@ -0,0 +1,9 @@
+<template>
+  <PageContent />
+</template>
+
+<script setup lang="tsx">
+definePageMeta({})
+defineRouteRules({})
+const PageContent = () => (<div>Home Page</div>)
+</script>