fix: fix the Converting circular structure to JSON error #13482
Conversation
WalkthroughA conditional check was added to the Changes
Poem
✨ Finishing Touches
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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/shared/src/toDisplayString.ts(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules
- GitHub Check: Header rules
- GitHub Check: Pages changed
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/shared/src/toDisplayString.ts (1)
20-21: Tighten the helper’s typing & follow house style
isVNodeLikeworks, but we can give callers a more useful type-guard and stay consistent with the 2-space / spaced-keyword style used elsewhere in this file.-const isVNodeLike = (val: unknown): boolean => - !!(val && (val as any).__v_isVNode === true) +const isVNodeLike = (val: unknown): val is { __v_isVNode: true } => + !!(val && (val as any).__v_isVNode === true)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/shared/src/toDisplayString.ts(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Redirect rules
- GitHub Check: Header rules
- GitHub Check: Pages changed
| // fix: https://github.com/vuejs/core/issues/13481 | ||
| if(isVNodeLike(val)){ | ||
| if(__DEV__){ | ||
| console.warn('[Vue warn]: Interpolated value is a VNode – this is unsupported and was likely passed by mistake. Returning an empty string.'); | ||
| } | ||
| return ''; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Style nits aside, nested VNodes can still explode JSON.stringify
- Minor: the current formatting (
if(__DEV__){) diverges from the rest of the file (if (__DEV__) {). - Major: the early return only protects when the root value is a VNode.
toDisplayString([h('div')])will still reachJSON.stringifyand throw the exact same “Converting circular structure to JSON” error becausereplacerdoes not recognise VNodes.
Proposed fix (includes style clean-up + VNode handling in replacer):
@@
- // fix: https://github.com/vuejs/core/issues/13481
- if(isVNodeLike(val)){
- if(__DEV__){
- console.warn('[Vue warn]: Interpolated value is a VNode – this is unsupported and was likely passed by mistake. Returning an empty string.');
- }
- return '';
- }
+ // #13481 – avoid JSON-stringifying VNodes (circular refs)
+ if (isVNodeLike(val)) {
+ if (__DEV__) {
+ console.warn(
+ '[Vue warn]: Interpolated value is a VNode – this is unsupported ' +
+ 'and was likely passed by mistake. Returning an empty string.'
+ )
+ }
+ return ''
+ }@@
if (isRef(val)) {
return replacer(_key, val.value)
+ } else if (isVNodeLike(val)) {
+ // Prevent circular reference blow-ups when VNodes are nested inside
+ // arrays / objects passed to toDisplayString.
+ return '[VNode]'
} else if (isMap(val)) {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // fix: https://github.com/vuejs/core/issues/13481 | |
| if(isVNodeLike(val)){ | |
| if(__DEV__){ | |
| console.warn('[Vue warn]: Interpolated value is a VNode – this is unsupported and was likely passed by mistake. Returning an empty string.'); | |
| } | |
| return ''; | |
| } | |
| // #13481 – avoid JSON-stringifying VNodes (circular refs) | |
| if (isVNodeLike(val)) { | |
| if (__DEV__) { | |
| console.warn( | |
| '[Vue warn]: Interpolated value is a VNode – this is unsupported ' + | |
| 'and was likely passed by mistake. Returning an empty string.' | |
| ) | |
| } | |
| return '' | |
| } | |
| if (isRef(val)) { | |
| return replacer(_key, val.value) | |
| } else if (isVNodeLike(val)) { | |
| // Prevent circular reference blow-ups when VNodes are nested inside | |
| // arrays / objects passed to toDisplayString. | |
| return '[VNode]' | |
| } else if (isMap(val)) { | |
| // ... | |
| } |
🤖 Prompt for AI Agents
In packages/shared/src/toDisplayString.ts around lines 27 to 33, fix the style
of the if statement to match the file's convention by adding spaces: change
`if(__DEV__){` to `if (__DEV__) {`. Also, extend the VNode handling by updating
the JSON.stringify replacer function to detect and handle nested VNodes,
preventing circular structure errors when VNodes appear inside arrays or
objects. This involves adding a check for VNode-like objects within the replacer
and returning an empty string for them, ensuring no VNode causes JSON.stringify
to throw.
|
Thanks for the PR, but I don't think it's worth it. |
fix the Converting circular structure to JSON error
Summary by CodeRabbit