Vue 3 – <Transition> renders non-element root node that cannot be animated

App.vue has a transition tag to fade the pages out and in.

<router-view v-slot="{ Component }">
   <transition name="fade" mode="out-in" appear>
      <component :is="Component"></component>
   </transition>
</router-view>

The Page.vue file has a simple structure, however, it also has a basic sliderjs component which throws the error <Transition> renders non-element root node that cannot be animated. If the transition tag is removed, everything works fine.

<div v-if="page.isReady">
   <swiper>
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
   </swiper>
</div>

https://swiperjs.com/vue/

The file also has the following:

import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/swiper.scss';
    
export default {
  components: {
    Swiper,
    SwiperSlide,
  },
 
  setup () {
    return {
      page: usePage()
    }
  }
}

Is there any trick to fix the error? Thanks for any tips!

No.

<template>
  <div></div>
  <div>~someone~</div>
</template>

Yes.

<template>
  <div>
  　　<div></div>
    ~someone~
  </div>
</template>

If you do not use a "div" tag just inside the "Template" tag, you will get the same error. (By the way, it was possible to use other than div tags)