Multiple root nodes returned from render function

[aner-perez]

With the following component template:

<template>
  <split-test name="discovery-experiment">
    <component-a slot="outcome1" chance="3" />
    <component-b slot="outcome2" chance="1" />
  </split-test>
</template>

I see this error:

[Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node.

Looking at the render() function in src/index.js, variations[winner] is returning an Array with a single item in it which Vue does not like. I am using Vue 2.5.3.

[aner-perez]

Changing the return statement to read:

 return variations[winner][0]

Fixes the issue for me but I'm not sure if this would work for all usage scenarios.

[softbeehive]

Hi @aner-perez,
Are you sure that both component-a and component-b contain only one root element? I'll check it for Vue 2.5.3 over the weekend. Meanwhile can you do a little check?

<template>
  <split-test name="discovery-experiment">
    <template slot='A' chance='3'>
      <div>A</div>
      <div>check</div>
    </template>
    <template slot='B' chance='1'>
      <div>B</div>
      <div>check</div>
    </template>
  </split-test>
</template>

[aner-perez]

I get the same error with that template.

[aner-perez]

I also get the error with this template:

<template>
  <split-test name="discovery-experiment">
    <template slot='A' chance='3'>
      <div>A</div>
    </template>
    <template slot='B' chance='1'>
      <div>B</div>
    </template>
  </split-test>
</template>

[Mat-thieu]

@aner-perez @softbeehive Same problem, any solution for this? If I replace the template tag by an html element the error disappears.

The components I'm outputting all have a single root element.

[aner-perez]

I was only evaluating this library and Vue at the time so I didn't get further than what was stated above. I got it to work by making the following change to the vue-a2b source code but I wasn't sure if that was the right thing to do here.

--- a/src/index.js
+++ b/src/index.js
@@ -28,7 +28,9 @@ const VueAB = {
           || randomCandidate(ctx.children)
 
         storage.entry = {name, winner}
-        return variations[winner]
+               if(variations[winner].length > 1) throw 'VueA2B Error: Only one root node allowed!'
+
+               return variations[winner][0]
       }
     })

[softbeehive]

Hey folks, this project is kinda abandoned. I used to support it during my time at fromAtoB

[ChadwellD]

Can you recommend another library to use?

[nkoehring]

@ChadwellD Hi! I took over the maintenance of this package. I will look into this issue now. Are you still using this library or maybe another one that helps with A/B testing in Vue? I would be interested in seeing what other libraries exist.