"Multiple root nodes returned from render function" error with functional component

[lebesnec]

Version

2.5.17

Reproduction link

https://jsfiddle.net/9mnqs3g2/

Steps to reproduce

open the reproduction link and look at the JS console.

What is expected?

You can have multiple root elements in functional components.

What is actually happening?

"Multiple root nodes returned from render function. Render function should return a single root node." error in console, nothing render.

---

According to #7088 (comment) functional component are the way to go if you need more than one root element.

[sqal]

functional component are the way to go if you need more than one root element.

Yes, but still, you can't have multiple root elements in a regular component, and that is what you are doing in the provided example (template: '<test/>'). So in order to fix it, just wrap the template of your app in a single div <div><test/></div> and the error will disappear.

[lebesnec]

I'm not sure I understand, there is only one root element <test/> in my template?

[posva]

test becomes two elements 😄

[lebesnec]

Ah I see. This is problematic since the whole point was to avoid the extra <div> to wrap it up because this will break my template.
Functional component was one of the 2 solutions proposed for this issue before it was locked: #7088 (comment)
The other solution is a third party library which use undocumented attributes, is "hacky" according to the author, and throw an error when I try to import it.

[Skriptach]

is there any solution except of wrapping or 3d party extension?

[sqal]

@Skriptach Currently no. I don't know if the team plans to introduce Fragments in Vue 2.x, but this feature will certainly land in 3.0

Fragments & Portals: despite the size reduction, 3.0 comes with built-in support for Fragments (component returning multiple root nodes) and Portals (rendering a sub-tree in another part of the DOM, instead of inside the component).

Source: https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf