Subscribe on changes!

Error rendering string with Fragment

avatar
Feb 19th 2023

Vue version

3.2.47

Link to minimal reproduction

https://stackblitz.com/edit/js-ysvjdp?file=index.js

Steps to reproduce

Nothing needs to be done, and the error will appear. Check out index.html and index.js

What is expected?

it should throw an error

Error in /~/index.js (4:1) Cannot assign to read only property '0' of string 'hello world'

What is actually happening?

I checked the code of packages/runtime-core/src/renderer.ts and found such a piece of logic in the mountChildren method.

const child = (children[i] = optimized
  ? cloneIfMounted(children[i] as VNode)
  : normalizeVNode(children[i]))

However, when type is Fragment and Children is a string, an error occurs. Should the string type be judged and use the split method to split the String under Fargment?

System Info

No response

Any additional comments?

No response

avatar
Feb 19th 2023

The assumption in the renderer is that Fragments will always have an array of children.

https://github.com/vuejs/core/blob/a0e7dc334356e9e6ffaa547d29e55b34b9b8a04d/packages/runtime-core/src/renderer.ts#L1080-L1093

Since Fragments are kind of a halfway public API it's not clearly documented, unfortunately.

avatar
Feb 20th 2023

Fragment is represented as the rendering of multiple child nodes under a container. When the type is Fragment and children is String, should it throw an error? Is this error justified in the design?

const vnode = {
  type: Fragment,
  children: 'hello world'
}

This represents an error, and the error message is confusing, is this correct?