-
-
Notifications
You must be signed in to change notification settings - Fork 8.8k
fix(compiler-sfc): throw mismatched script langs error before invoking babel #13194
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(compiler-sfc): throw mismatched script langs error before invoking babel #13194
Conversation
…g 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
Size ReportBundles
Usages
|
@vue/compiler-core
@vue/compiler-dom
@vue/compiler-sfc
@vue/compiler-ssr
@vue/reactivity
@vue/runtime-core
@vue/runtime-dom
@vue/server-renderer
@vue/shared
vue
@vue/compat
commit: |
WalkthroughAdds an early language-mismatch validation between <script> and <script setup> in compileScript, throwing a specific error before Babel parsing. Updates unit tests to cover a ts/tsx mismatch case linked to issue #13193. No public API changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev
participant SFC as SFCDescriptor
participant CS as compileScript
participant Ctx as ScriptCompileContext
participant Parser as Babel/TS Parser
Dev->>CS: compileScript(SFC, options)
CS->>CS: Extract <script> & <script setup> langs
note over CS: New: Early language mismatch check
alt Languages differ
CS-->>Dev: Throw Error("<script> and <script setup> must have the same language type.")
else Languages match
CS->>Ctx: Create ScriptCompileContext
CS->>Parser: Parse/transform code
Parser-->>CS: AST / transformed output
CS-->>Dev: Compiled script result
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNone found. Suggested labels
Suggested reviewers
Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/compiler-sfc/src/compileScript.ts (1)
177-183
: Normalize “no lang” to JS to avoid surprising breakagesAs written,
<script lang="js">
+<script setup>
(no lang) will now be considered mismatched, even though “no lang” effectively means JS. That could be a subtle breaking change for users who explicitly setlang="js"
on only one block.Consider normalizing missing lang to
'js'
for the comparison. This preserves the newly added behavior for real mismatches likets
vstsx
(andjs
vsjsx
) while avoiding a strict mismatch forjs
vs implicit js.Proposed minimal change:
- if (script && scriptSetup && scriptLang !== scriptSetupLang) { - throw new Error( - `[@vue/compiler-sfc] <script> and <script setup> must have the same ` + - `language type.`, - ) - } + const normalizeLang = (l?: string) => (l == null ? 'js' : l) + if ( + script && + scriptSetup && + normalizeLang(scriptLang) !== normalizeLang(scriptSetupLang) + ) { + throw new Error( + `[@vue/compiler-sfc] <script> and <script setup> must have the same ` + + `language type.`, + ) + }Optional: enhance diagnostics by including the detected types:
- throw new Error( - `[@vue/compiler-sfc] <script> and <script setup> must have the same ` + - `language type.`, - ) + const a = normalizeLang(scriptLang) + const b = normalizeLang(scriptSetupLang) + throw new Error( + `[@vue/compiler-sfc] <script> and <script setup> must have the same language type. ` + + `Found "${a}" and "${b}".` + )packages/compiler-sfc/__tests__/compileScript.spec.ts (1)
916-923
: Add a couple more mismatch assertions to harden coverageThe new test covering
ts
vstsx
is great and directly proves the regression is fixed before Babel. Consider adding:
js
vsjsx
mismatch- Explicit
lang="js"
vs implicit JS (no lang) — only if you keep strict inequality. If you adopt normalization (treat missing asjs
), assert that this passes instead.Here are two illustrative cases you can add under the same “errors” suite:
+ expect(() => + compile( + `<script lang="js">foo()</script><script setup lang="jsx">bar()</script>`, + ), + ).toThrow(`<script> and <script setup> must have the same language type`)If you adopt normalization (missing => js), then also assert no-throw for explicit js vs implicit js:
+ expect(() => + compile( + `<script lang="js">foo()</script><script setup>bar()</script>`, + ), + ).not.toThrow()
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
packages/compiler-sfc/__tests__/compileScript.spec.ts
(1 hunks)packages/compiler-sfc/src/compileScript.ts
(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/compiler-sfc/src/compileScript.ts (2)
packages/compiler-sfc/src/script/context.ts (1)
ScriptCompileContext
(13-158)packages/compiler-sfc/src/index.ts (1)
ScriptCompileContext
(68-68)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test / e2e-test
🔇 Additional comments (3)
packages/compiler-sfc/src/compileScript.ts (2)
177-183
: Early mismatch check prevents misleading Babel SyntaxError — solid fixCatching the lang mismatch before initializing the parsing context is the right call and directly addresses #13193 by avoiding Babel’s misleading error. The error message is clear and scoped to compiler-sfc.
184-185
: Creation of ScriptCompileContext after validation is in the right placeMoving
new ScriptCompileContext(...)
after the mismatch check ensures Babel parsing/plugins are never selected based on an incompatiblelang
. Good sequencing.packages/compiler-sfc/__tests__/compileScript.spec.ts (1)
916-923
: LGTM: regression covered with ts/tsx mismatch, and error text matchesThe added assertion precisely covers #13193 and verifies the improved message surfaces before Babel parsing. Looks good.
/ecosystem-ci run |
📝 Ran ecosystem CI: Open
|
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
Before:

After:

Summary by CodeRabbit
Bug Fixes
Tests