Trouble with Vue 3 and Vue Router 4

[vertigofactory]

Hi, I'm trying to use vue3-sfc-loader with Vue 3 and Vue Router 4.

This is my code:

const componentOptions = {
  moduleCache: {
    vue: Vue,
    router: VueRouter,
  },

  async getFile(url) {
    const res = await fetch(url);
    if ( !res.ok )
      throw Object.assign(new Error(res.statusText + ' ' + url), { res });
    return {
      getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
    }
  },

  addStyle(textContent) {
      const style = Object.assign(document.createElement('style'), { textContent });
      const ref = document.head.getElementsByTagName('style')[0] || null;
      document.head.insertBefore(style, ref);
  },
}

const { loadModule } = window["vue3-sfc-loader"];

const Home = () => loadModule('./components/Home.vue', componentOptions)
const Contacts = () => loadModule('./components/Contacts.vue', componentOptions)

const routes = [
  { path: '/', component: Home },
  { path: '/contacts', component: Contacts },
]

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
})

const RootComponent = {
  components: {
    'app': Vue.defineAsyncComponent(() => loadModule('./components/App.vue', componentOptions))
  },
  template: `<app></app>`
}

const app = Vue.createApp(RootComponent)

app.use(router)

const vm = app.mount('#app')

So, I've got two routes, Home and Contacts, and everything works fine when I visit for the first time each route, but when I switch to the other route (for example: Home -> Contacts -> Home) the page gets broken and I've got these errors/warning in my console:

vue.global.js:1290 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <Anonymous onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <Anonymous> 
  at <AsyncComponentWrapper> 
  at <App>

vue.global.js:8835 Uncaught (in promise) TypeError: Cannot read property 'cloneNode' of null
    at insertStaticContent (vue.global.js:8835)
    at mountStaticNode (vue.global.js:5905)
    at patch (vue.global.js:5853)
    at componentEffect (vue.global.js:6391)
    at reactiveEffect (vue.global.js:410)
    at effect (vue.global.js:385)
    at setupRenderEffect (vue.global.js:6337)
    at mountComponent (vue.global.js:6296)
    at processComponent (vue.global.js:6254)
    at patch (vue.global.js:5867)

If I define the components without using the loadModule() method like this:

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

then everything works, so it could be an issue related to vue3-sfc-loader, I think.

Please, do you have a working example using Vue3 and Vue Router 4?

[vertigofactory]

Problem solved: my .vue component templates were not correctly wrapped in a single <div>, like this:

<template>
    <div>Content 1</div>
    <div>Content 2</div>
</template>

instead of:

<template>
    <div>
         <div>Content 1</div>
         <div>Content 2</div>
    </div>
</template>

so the page was breaking after the first <div>.

[FranckFreiburger]

see. #172