fix(compiler-core): handle unnamed function expressions with semicolons in v-on handlers

[Liuwei1125]

Summary

When a v-on handler contains a function expression with semicolons (e.g. @input="function () { ';' }"), the Babel parser incorrectly identifies it as a FunctionDeclaration (which requires a name) rather than a FunctionExpression.

This happens because Babel's parseExpression treats function () { ';' } as a statement (FunctionDeclaration without a name), which is invalid JavaScript. When this heuristic incorrectly classifies the handler as an inline statement, the generated code causes a parsing error.

Fix

Added a fallback in isFnExpressionNode: if the initial parse result is an unnamed FunctionDeclaration, we wrap it in parentheses and try parsing again as an expression. This correctly identifies function () { ';' } as a FunctionExpression.

Test case

<template>
  <input @input="function () { ';' }" />
</template>

Previously caused: (2:18) Error parsing JavaScript expression: Unexpected token (1:10)

Now works correctly without parsing errors.

Related

Fixes #14287

Summary by CodeRabbit

• Bug Fixes
  • Improved compiler's ability to accurately detect and handle complex function expressions, enhancing compatibility with various function declaration patterns and strengthening TypeScript support during compilation.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 13d389b4-5c13-4aae-b8f6-9e9d88e39f73

📥 Commits

Reviewing files that changed from the base of the PR and between 57545e9 and 9b05030.

📒 Files selected for processing (1)

• packages/compiler-core/src/utils.ts

---

📝 Walkthrough

Walkthrough

Enhanced isFnExpressionNode to robustly detect function expressions by attempting multiple parsing strategies with TypeScript plugin support, including wrapping anonymous function declarations in parentheses for re-parsing to handle edge cases where semicolons cause statement parsing instead of expression parsing.

Changes

Function Expression Detection Enhancement

Layer / File(s)	Summary
Core Logic packages/compiler-core/src/utils.ts	isFnExpressionNode now computes a plugins array with TypeScript support, parses input with these plugins, unwraps Program nodes, detects FunctionExpression/ArrowFunctionExpression, and re-parses nameless FunctionDeclarations wrapped in parentheses to distinguish them from expression-form function declarations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 Brackets and semicolons, oh what a maze!
Function expressions caught in parsing haze,
Wrapped 'round in parens, they parse just right,
The TypeScript plugins bring clarity to light!
No more errors, just smooth sailing through,
Vue's event handlers now work as they should do! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly identifies the specific bug being fixed: handling unnamed function expressions with semicolons in v-on handlers, which directly matches the code changes.
Linked Issues check	✅ Passed	The PR successfully implements the core objective from issue #14287: parsing unnamed function expressions with semicolons as expressions by wrapping in parentheses and re-parsing.
Out of Scope Changes check	✅ Passed	All changes in isFnExpressionNode are directly scoped to fixing the parsing issue with unnamed function expressions containing semicolons; no unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

• Generate code and open pull requests
• Plan features and break down work
• Investigate incidents and troubleshoot customer tickets together
• Automate recurring tasks and respond to alerts with triggers
• Summarize progress and report instantly

Built for teams:

• Shared memory across your entire org—no repeating context
• Per-thread sandboxes to safely plan and execute work
• Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[edison1105]

duplicate of #14312