Multiple root nodes returned from render function.

[mateuszlubianka1993]

Subject: I want to use vue-lazy-hydration, but when i try i always get the same warn:

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

And the component is not showing.

I have tried with many different components.

Example code:

<template>
  <div class="icons-box">
    <LazyHydrate when-idle>
      <MiniCartDropdown v-if="something"/>
    </LazyHydrate>
  </div>
</template>
</script>

<script>
import LazyHydrate from 'vue-lazy-hydration';

export default {
  name: 'IconsBox',
  props: ['onClickMenu'],
  components: {
    LazyHydrate,
    MiniCartDropdown: () => import('@/modules/cart/_components/_miniCart/MiniCartDropdown.vue'),
  },
  data() {
    return {
      isCartDropdownOpen: false,
    };
  },
};
</script>

I also tried this way:

ImageSlider: hydrateWhenIdle(() => import('./ImageSlider.vue')),

but also the same error occurs.

Do you know what could be causing the problem? If more details are needed, I will provide them.

[maoberlehner]

Code looks correct. Please add a link to CodeSandbox reproduction.