Skip to content

fix(runtime-core): avoid symbol coercion during props validation#8539

Merged
edison1105 merged 3 commits into
vuejs:mainfrom
mattersj:props-validation-symbol-coercion
May 6, 2026
Merged

fix(runtime-core): avoid symbol coercion during props validation#8539
edison1105 merged 3 commits into
vuejs:mainfrom
mattersj:props-validation-symbol-coercion

Conversation

@mattersj

@mattersj mattersj commented Jun 10, 2023 •
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Contributor

fixes #8487

Summary by CodeRabbit

Bug Fixes

  • Improved component prop type validation to properly support Symbol types and provide clearer error messages when type mismatches occur.

@skirtles-code skirtles-code mentioned this pull request Jun 23, 2024
Closed
@skirtles-code

skirtles-code commented Jun 23, 2024

Copy link
Copy Markdown
Contributor

#7809 seems similar, though this PR appears more comprehensive.

@edison1105 edison1105 added 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready for review This PR requires more reviews labels Aug 27, 2024
@skirtles-code skirtles-code mentioned this pull request May 25, 2025
Closed
@coderabbitai

coderabbitai Bot commented May 6, 2026 •
edited
Loading

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d7b8981e-0072-4f5d-b415-d89d4e424bc7

📥 Commits

Reviewing files that changed from the base of the PR and between 3310eea and 5fce0c2.

📒 Files selected for processing (2)
  • packages/runtime-core/__tests__/componentProps.spec.ts
  • packages/runtime-core/src/componentProps.ts
📝 Walkthrough

Walkthrough

Vue's prop-type validation now handles Symbol values without runtime errors. When a Symbol is passed to a prop with a non-Symbol type, the system emits a proper type-mismatch warning instead of attempting invalid type coercion.

Changes

Symbol Prop Validation

Layer / File(s) Summary
Core Implementation
packages/runtime-core/src/componentProps.ts		 Added isSymbol import and introduced isCoercible helper to determine when to append actual values in error messages. Updated styleValue to handle Symbol via toString(). Modified getInvalidTypeMessage to skip value coercion for non-coercible types like Symbol and Boolean.
Tests / Verification
packages/runtime-core/__tests__/componentProps.spec.ts		 Added test props symStr (String type) and sym (Symbol type) with mismatched input values and assertions verifying correct type-mismatch warnings are generated.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

A symbol slipped where strings belong,
No coercion, just a warning song—
No crashes now, just kindly notes,
Vue validates with graceful goats! 🐰✨

🚥 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 describes the main fix: avoiding symbol coercion during props validation, which directly addresses the core issue.
Linked Issues check ✅ Passed The PR successfully addresses the linked issue #8487 by preventing Symbol coercion in props validation and adding proper test coverage for type-mismatch warnings.
Out of Scope Changes check ✅ Passed All changes are directly related to fixing Symbol coercion in props validation as specified in issue #8487; no extraneous modifications detected.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with 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.

❤️ Share

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

@github-actions

github-actions Bot commented May 6, 2026

Copy link
Copy Markdown

Size Report

Bundles

File Size Gzip Brotli
runtime-dom.global.prod.js 106 kB 40 kB 35.9 kB
vue.global.prod.js 164 kB 60 kB 53.3 kB

Usages

Name Size Gzip Brotli
createApp (CAPI only) 48.6 kB 18.9 kB 17.3 kB
createApp 56.7 kB 21.9 kB 20.1 kB
createSSRApp 61 kB 23.7 kB 21.6 kB
defineCustomElement 62.9 kB 23.9 kB 21.8 kB
overall 71.5 kB 27.3 kB 24.9 kB

@pkg-pr-new

pkg-pr-new Bot commented May 6, 2026

Copy link
Copy Markdown

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@8539

npm i https://pkg.pr.new/@vue/compiler-core@8539

yarn add https://pkg.pr.new/@vue/compiler-core@8539.tgz

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@8539

npm i https://pkg.pr.new/@vue/compiler-dom@8539

yarn add https://pkg.pr.new/@vue/compiler-dom@8539.tgz

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@8539

npm i https://pkg.pr.new/@vue/compiler-sfc@8539

yarn add https://pkg.pr.new/@vue/compiler-sfc@8539.tgz

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@8539

npm i https://pkg.pr.new/@vue/compiler-ssr@8539

yarn add https://pkg.pr.new/@vue/compiler-ssr@8539.tgz

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@8539

npm i https://pkg.pr.new/@vue/reactivity@8539

yarn add https://pkg.pr.new/@vue/reactivity@8539.tgz

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@8539

npm i https://pkg.pr.new/@vue/runtime-core@8539

yarn add https://pkg.pr.new/@vue/runtime-core@8539.tgz

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@8539

npm i https://pkg.pr.new/@vue/runtime-dom@8539

yarn add https://pkg.pr.new/@vue/runtime-dom@8539.tgz

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@8539

npm i https://pkg.pr.new/@vue/server-renderer@8539

yarn add https://pkg.pr.new/@vue/server-renderer@8539.tgz

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@8539

npm i https://pkg.pr.new/@vue/shared@8539

yarn add https://pkg.pr.new/@vue/shared@8539.tgz

vue

pnpm add https://pkg.pr.new/vue@8539

npm i https://pkg.pr.new/vue@8539

yarn add https://pkg.pr.new/vue@8539.tgz

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@8539

npm i https://pkg.pr.new/@vue/compat@8539

yarn add https://pkg.pr.new/@vue/compat@8539.tgz

commit: 5fce0c2

@edison1105

edison1105 commented May 6, 2026

Copy link
Copy Markdown
Member

/ecosystem-ci run

@vue-bot

vue-bot commented May 6, 2026

Copy link
Copy Markdown
Contributor

📝 Ran ecosystem CI: Open

suite result latest scheduled
nuxt ❌ failure ✅ success
language-tools ✅ success ✅ success
primevue ✅ success ✅ success
vant ✅ success ✅ success
vueuse ✅ success ✅ success
vite-plugin-vue ✅ success ✅ success
router ✅ success ✅ success
test-utils ✅ success ✅ success
radix-vue ✅ success ✅ success
vitepress ✅ success ✅ success
vuetify ✅ success ✅ success
pinia ✅ success ✅ success
vue-simple-compiler ✅ success ✅ success
vue-i18n ✅ success ✅ success
vue-macros ✅ success ✅ success
quasar ✅ success ✅ success

@edison1105 edison1105 merged commit 23d4fb5 into vuejs:main May 6, 2026
14 checks passed
@mattersj mattersj deleted the props-validation-symbol-coercion branch May 6, 2026 15:15
@claude claude Bot mentioned this pull request May 18, 2026
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. ready for review This PR requires more reviews

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

(runtime-core): Runtime error when mistakenly converting symbols to a string during props validation

4 participants

@mattersj @skirtles-code @edison1105 @vue-bot