From 755ce703369717732d04c6f00201c3b26c5c121a Mon Sep 17 00:00:00 2001
From: Adrian Cerbaro <adrian@cerbaro.dev>
Date: Sun, 13 Apr 2025 20:05:04 -0300
Subject: [PATCH] fix(compiler-sfc): throw mismatched script langs error before
 invoking babel

Previously, babel would throw a misleading error if <script> and <script setup> used different lang values. Now, the compiler checks for language mismatch first and throws a clear error before invoking babel

Close #13193
---
 .../__tests__/compileScript.spec.ts             |  7 +++++++
 packages/compiler-sfc/src/compileScript.ts      | 17 +++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts
index 11b5661c16c..dbc79fbe851 100644
--- a/packages/compiler-sfc/__tests__/compileScript.spec.ts
+++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts
@@ -886,6 +886,13 @@ describe('SFC compile <script setup>', () => {
       expect(() =>
         compile(`<script>foo()</script><script setup lang="ts">bar()</script>`),
       ).toThrow(`<script> and <script setup> must have the same language type`)
+
+      // #13193 must check lang before parsing with babel
+      expect(() =>
+        compile(
+          `<script lang="ts">const a = 1</script><script setup lang="tsx">const Comp = () => <p>test</p></script>`,
+        ),
+      ).toThrow(`<script> and <script setup> must have the same language type`)
     })
 
     const moduleErrorMsg = `cannot contain ES module exports`
diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts
index 962b7bc7936..b8058146dc7 100644
--- a/packages/compiler-sfc/src/compileScript.ts
+++ b/packages/compiler-sfc/src/compileScript.ts
@@ -163,13 +163,21 @@ export function compileScript(
     )
   }
 
-  const ctx = new ScriptCompileContext(sfc, options)
   const { script, scriptSetup, source, filename } = sfc
   const hoistStatic = options.hoistStatic !== false && !script
   const scopeId = options.id ? options.id.replace(/^data-v-/, '') : ''
   const scriptLang = script && script.lang
   const scriptSetupLang = scriptSetup && scriptSetup.lang
 
+  if (script && scriptSetup && scriptLang !== scriptSetupLang) {
+    throw new Error(
+      `[@vue/compiler-sfc] <script> and <script setup> must have the same ` +
+        `language type.`,
+    )
+  }
+
+  const ctx = new ScriptCompileContext(sfc, options)
+
   if (!scriptSetup) {
     if (!script) {
       throw new Error(`[@vue/compiler-sfc] SFC contains no <script> tags.`)
@@ -178,13 +186,6 @@ export function compileScript(
     return processNormalScript(ctx, scopeId)
   }
 
-  if (script && scriptLang !== scriptSetupLang) {
-    throw new Error(
-      `[@vue/compiler-sfc] <script> and <script setup> must have the same ` +
-        `language type.`,
-    )
-  }
-
   if (scriptSetupLang && !ctx.isJS && !ctx.isTS) {
     // do not process non js/ts script blocks
     return scriptSetup