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 vuejs#13193

Author: adrianbrs

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`

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