Cannot read properties of null (reading 'isCE')

[zsh2401]

I just installed this library and imported to my Vue3 like what example presents. (import and app.use) then I got this error.

That is stack:

TypeError: Cannot read properties of null (reading 'isCE')
    at renderSlot (runtime-core.esm-bundler.js:2966:34)
    at Proxy.ze (vue-awesome-sidebar.js:1:22054)
    at renderComponentRoot (runtime-core.esm-bundler.js:902:44)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5615:57)
    at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
    at instance.update (runtime-core.esm-bundler.js:5729:56)
    at setupRenderEffect (runtime-core.esm-bundler.js:5743:9)
    at mountComponent (runtime-core.esm-bundler.js:5525:9)
    at processComponent (runtime-core.esm-bundler.js:5483:17)
    at patch (runtime-core.esm-bundler.js:5085:21)

Part of my code are as follows:

<template>
 <VueAwesomeSideBar v-model:collapsed="collapsed" :menu="testMenu" v-model:miniMenu="miniMenu" vueRouterEnabel></VueAwesomeSideBar>
</template>

<script lang="ts" setup>
const miniMenu = ref(false)
const props = defineProps<{
    collapsed: boolean
}>()

const testMenu: MenuItem[] = [
    {
        name: 'Dashboard',
        icon: { class: 'material-icons-outlined', text: 'dashboard' },
        children: [
            {
                href: '/c',
                name: 'level 2.1',
            },
        ]
    }
]
</script>

[zsh2401]

Your library is definitely useful and beautiful, but in addition, it is, I thought necessary, we can publish .map file for a better debugging experience.

[amirkian007]

@zsh2401 Hi , thank you very much for using this library and reporting the issue ❤️, yes i think a .map file is needed, i added the sourcemap option to vite config and published an new version(1.2.1) , there was also a small issue with the css ,that was because of the minification tool i was using. it works ok now. in regards to to the error you are getting i was not able to re-create that exact same error message but i think i know what the problem is: v-model cannot be used on a prop, because local prop bindings are not writable. if you wish to use two-way data binding on the prop try the following code it works ok for me :

<template>
 <VueAwesomeSideBar
   :menu="testMenu"
    v-model:miniMenu="miniMenu"
    :collapsed="collapsed"
    vueRouterEnabel
    @update:collapsed="collapseChange"
  ></VueAwesomeSideBar>
</template>

<script lang="ts" setup>
import {ref} from "vue"
const miniMenu = ref(false)
const emit = defineEmits(['update:collapsed'])

const collapseChange =(isCollapsed:boolean)=>{
emit('update:collapsed', isCollapsed)
}

 const props = defineProps<{
     collapsed: boolean
 }>()

const testMenu: any[] = [
    {
        name: 'Dashboard',
        icon: { class: 'material-icons-outlined', text: 'dashboard' },
        children: [
            {
                href: '/c',
                name: 'level 2.1',
            },
        ]
    }
]
</script>

and on the parent :

<script setup lang="ts">
import { ref, watch } from "vue";
const collapsed = ref(false);
import HelloWorld from "./components/HelloWorld.vue";
watch(collapsed, () => {
  console.log(collapsed);
});
</script>

<template>
  <HelloWorld v-model:collapsed="collapsed" />
</template>

please let me know if your problem is fixed and if you run into any other problems I'm glad to help. good luck

[zsh2401]

@zsh2401 Hi , thank you very much for using this library and reporting the issue ❤️, yes i think a .map file is needed, i added the sourcemap option to vite config and published an new version(1.2.1) , there was also a small issue with the css ,that was because of the minification tool i was using. it works ok now. in regards to to the error you are getting i was not able to re-create that exact same error message but i think i know what the problem is: v-model cannot be used on a prop, because local prop bindings are not writable. if you wish to use two-way data binding on the prop try the following code it works ok for me :

<template>
 <VueAwesomeSideBar
   :menu="testMenu"
    v-model:miniMenu="miniMenu"
    :collapsed="collapsed"
    vueRouterEnabel
    @update:collapsed="collapseChange"
  ></VueAwesomeSideBar>
</template>

<script lang="ts" setup>
import {ref} from "vue"
const miniMenu = ref(false)
const emit = defineEmits(['update:collapsed'])

const collapseChange =(isCollapsed:boolean)=>{
emit('update:collapsed', isCollapsed)
}

 const props = defineProps<{
     collapsed: boolean
 }>()

const testMenu: any[] = [
    {
        name: 'Dashboard',
        icon: { class: 'material-icons-outlined', text: 'dashboard' },
        children: [
            {
                href: '/c',
                name: 'level 2.1',
            },
        ]
    }
]
</script>

and on the parent :

<script setup lang="ts">
import { ref, watch } from "vue";
const collapsed = ref(false);
import HelloWorld from "./components/HelloWorld.vue";
watch(collapsed, () => {
  console.log(collapsed);
});
</script>

<template>
  <HelloWorld v-model:collapsed="collapsed" />
</template>

please let me know if your problem is fixed and if you run into any other problems I'm glad to help. good luck

I followed your suggestion and this error keeps occurring. I am confused and even tried not binding collapsed or any other properties, this error is still. 😂

[zsh2401]

Though I haven't configure any properties, this error happens.

[zsh2401]

Let's cheer! I solved this problem by the method this issue provided!

    resolve: {
        dedupe: [
            'vue'
        ]
    },

[zsh2401]

I am so glad to use this library, it is the most beautiful sidebar component in Vue I thought! But there is some advice i wanna put forward: 1st some spelling error should be fixed: such as vueRouterEnabel => VueRouterEnable 2nd the effect of collapsed should be the miniMenu has now and the miniMenu may have to rename to other.

All below are only some personal advice for improvement of this library, I am so glad to hear if you wanna conserve with me.

[amirkian007]

I followed your suggestion and this error keeps occurring. I am confused and even tried not binding collapsed or any other properties, this error is still. 😂

OMG 😂.

Let's cheer! I solved this problem by the method this ... provided!

weird bug though, they say its because two distinct copies of the Vue package being used, one in each package. but vue is set as a dev-dependency in this library. and its even weirder that i created a new project using vite and it worked ok :/ . maybe if you delete package-lock.json and update your vite and vue packages to the latest version it will work without the dedupe config ?please let me know if it works, i have to add a note about this in the docs for vite and vue-cli. thanks.

I am so glad to use this library, it is the most beautiful sidebar component in Vue I thought!

THANKS bro! ❤️

1st some spelling error should be fixed: such as vueRouterEnabel => VueRouterEnable

yes i love your ideas , the naming can be better in this library , some people are using this library and changing the api will cause a bug for them when they update their packages. the solution is to change the api name to something new and make the old one still work. i may create a PR for that soon. if you like and have any suggestions for names i will be very happy if you submit a pr with a suggestion list and i will work on it.

2nd the effect of collapsed should be the miniMenu has now.

i can't understand , could you be a bit more clear? which effect of collapsed ? which miniMenu's effect?

THANKS again for the assist!

[zsh2401]

I followed your suggestion and this error keeps occurring. I am confused and even tried not binding collapsed or any other properties, this error is still. 😂

OMG 😂.

Let's cheer! I solved this problem by the method this ... provided!

weird bug though, they say its because two distinct copies of the Vue package being used, one in each package. but vue is set as a dev-dependency in this library. and its even weirder that i created a new project using vite and it worked ok :/ . maybe if you delete package-lock.json and update your vite and vue packages to the latest version it will work without the dedupe config ?please let me know if it works, i have to add a note about this in the docs for vite and vue-cli. thanks.

I am so glad to use this library, it is the most beautiful sidebar component in Vue I thought!

THANKS bro! ❤️

1st some spelling error should be fixed: such as vueRouterEnabel => VueRouterEnable

yes i love your ideas , the naming can be better in this library , some people are using this library and changing the api will cause a bug for them when they update their packages. the solution is to change the api name to something new and make the old one still work. i may create a PR for that soon. if you like and have any suggestions for names i will be very happy if you submit a pr with a suggestion list and i will work on it.

2nd the effect of collapsed should be the miniMenu has now.

i can't understand , could you be a bit more clear? which effect of collapsed ? which miniMenu's effect?

THANKS again for the assist!

Hidden: the menu is invisible. Collapsed=true: sidebar with only icons. Collapsed=false: expanded sidebar with showing text and icons.