Uncaught (in promise) TypeError with Vue3

[Bjorn Hjortsberg]

I was going to try vue-sidebar-menu but I can't get it to work. I'm using Vue3 and vue-sidebar-menu 4.8.0
This is the error I get:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c')
    at Proxy.eval (vue-sidebar-menu.js:1)
    at renderComponentRoot (runtime-core.esm-bundler.js:623)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4471)
    at ReactiveEffect.run (reactivity.esm-bundler.js:195)
    at setupRenderEffect (runtime-core.esm-bundler.js:4597)
    at mountComponent (runtime-core.esm-bundler.js:4380)
    at processComponent (runtime-core.esm-bundler.js:4338)
    at patch (runtime-core.esm-bundler.js:3939)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4478)
    at ReactiveEffect.run (reactivity.esm-bundler.js:195)

I'm new to Vue so I might be doing something wrong. This is my sidebar.vue:

<template>
  <sidebar-menu :menu='items' />
</template>

<script>

export default {
  data: () => ({
    isDeveloper: false,
    items: [
      { title: 'Main', href: '/' },
      { title: 'Menu1', href: '/menu1' },
      { title: 'Menu2', href: '/menu2' },
      { title: 'menu3', href: '/menu3' },
      {
        title: 'Help',
        href: '/help',
        child: [
          { title: 'Help1', href: '/help' },
          { title: 'Help2', href: '/help' }
        ]
      }
    ]
  })
}
</script>

And in main.js:

import App from './App.vue'
import router from './router'
import SidebarMenu from 'vue-sidebar-menu'

createApp(App).use(router).use(SidebarMenu).mount('#app')

In App.vue I have:

<template>
  <sidebar></sidebar>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view/>
</template>

<script>
import Sidebar from '@/components/Sidebar.vue'

export default {
  components: {
    Sidebar
  }
}
</script>

[Bjorn Hjortsberg]

If I move import SidebarMenu from 'vue-sidebar-menu' to a local import in Sidebar.vue I don't get the error but it still does not show any sidebar menu and I get:

[Vue warn]: Component is missing template or render function. 
  at <SidebarMenu menu= (5) [{…}, {…}, {…}, {…}, {…}]0: {title: 'Main', href: '/'}1: {title: 'Menu1', href: '/menu1'}2: {title: 'Menu2', href: '/menu2'}3: {title: 'menu3', href: '/menu3'}4: {title: 'Help', href: '/help', child: Array(2)}length: 5[[Prototype]]: Array(0) > 
  at <Sidebar> 
  at <App>

[yaminncco]

For vue3 you need to install the next version v5 https://github.com/yaminncco/vue-sidebar-menu/tree/next#installation

[Bjorn Hjortsberg]

Works now, thanks! And thank you for the project!