Error when i collapse the menu

[alesssz]

I'm getting an error when i try to collapse the menu.

I got this in my main.js

import { createApp } from 'vue'
import App from './App.vue'

/* Bootstrap */
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap'
/* Font Awesome */
import '@fortawesome/fontawesome-free/css/all.css'
import '@fortawesome/fontawesome-free/js/all.js'
/* Sidebar menu */
import VueSidebarMenu from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'

app.use(VueSidebarMenu)
app.mount('#app')

in App.vue

<template>
  <main>
    <SideBarMenu></SideBarMenu>
  </main>
</template>

<script>
import SideBarMenu from './components/includes/SideBarMenu.vue'

export default {
  name: 'App',
  components: {
    SideBarMenu
  }
}
</script>

And in the SideBarMenu.vue component

<template>
    <sidebar-menu :menu="menu" />
  </template>

  <script>
    export default {
      data() {
        return {
          menu: [
            {
              header: 'Main Navigation',
              hiddenOnCollapse: true
            },
            {
              href: '/',
              title: 'Dashboard',
              icon: 'fa fa-user'
            },
            {
              href: '/charts',
              title: 'Charts',
              icon: 'fa fa-chart-area',
              child: [
                {
                  href: '/charts/sublink',
                  title: 'Sub Link'
                }
              ]
            }
          ]
        }
      }
    }
  </script>

Im getting this error Uncaught (in promise) DOMException: Node.insertBefore: Child to insert before is not a child of this node

when I try to collapse the menu with the button in the footer.

How to resolve this?

[yaminncco]

I am not able to reproduce the issue, can you provide a minimal reproduction?

[alesssz]

I am not able to reproduce the issue, can you provide a minimal reproduction?

Digging out what's wrong, I found out that the interations with @fortawesome/fontawesome-free is causing that error, but I honestly don't know why. Using the regular font awesome (from Font Awesome Vue with their imports is working well (but I didn't want to set up a library.add for each icons, that's why I tried to use @fortawesome/fontawesome-free)

This is the reproducable thing, i tried to build a brand new project with Vue CLI and copy and paste all the code above (installing modules like @fortawesome/fontawesome-free, bootstrap, vue-router and obviously vue-sidebar-menu) and the interaction with @fortawesome/fontawesome-free is causing the error. Removing that make the icons to disappear, but the collaspe button is working again

[yaminncco]

Remove @fortawesome/fontawesome-free/js/all.js but i recommend to use the vue component, you can also import all the icons

// main.js
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
library.add(fas)

// SideBarMenu.vue
import { h } from 'vue'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

const faIcon = (props) => {
  return {
    element: h('div', [h(FontAwesomeIcon, { size: 'lg', ...props })]),
  }
}

...
{
  href: '/',
  title: 'Dashboard',
  icon: faIcon({ icon: 'fa fa-user' }),
}

[alesssz]

That works perfectly! Thank you!