search

ntohq / buefy-next

Lightweight UI components for Vue.js (Vue3) based on Bulma
https://v3.buefy.org
MIT License
98 stars 8 forks source link

buefy Navbar Error --> TypeError: this.genNavbar is not a function #27

Open JWaldowPE opened 11 months ago

JWaldowPE commented 11 months ago

Overview of the problem

Buefy version: buefy-next 0.9.23 Vuejs version: [3.3.4] OS/Browser:Windows11/Chrome

Description

Not sure if it even is an error within buefy-next but after migrating my vue.js 2 project to 3 I encountered an error with the navbar we were using before. Within the mount of my application it throws an error saying: "TypeError: this.genNavbar is not a function": Stacktrace: Uncaught (in promise) TypeError: this.genNavbar is not a function at Proxy.render (navbar.js:389:1) at renderComponentRoot (vue.runtime.esm-bundler.js:2693:1) at ReactiveEffect.componentUpdateFn [as fn] (vue.runtime.esm-bundler.js:8710:1) at ReactiveEffect.run (vue.runtime.esm-bundler.js:429:1) at instance.update (vue.runtime.esm-bundler.js:8844:1) at setupRenderEffect (vue.runtime.esm-bundler.js:8852:1) at mountComponent (vue.runtime.esm-bundler.js:8618:1) at processComponent (vue.runtime.esm-bundler.js:8570:1) at patch (vue.runtime.esm-bundler.js:8045:1) at mountChildren (vue.runtime.esm-bundler.js:8289:1)

I tried to use the b-navbar diretly in my App but I am getting the same Error basically: vue.runtime.esm-bundler.js:1458 [Vue warn]: Property "genNavbar" was accessed during render but is not defined on instance. at <BNavbar> at <App> image

I am not completely sure this error has something to do with the buefy package - but maybe someone can help me since I really need this package to work or else we have to stay on vue.js 2. If it is specific to my project I will try to provide a codepen or something - but maybe someone can help me

Steps to reproduce

Not sure if it is happening in new Projects as well Vue.js@3 Webpack@5 Mount App and try to add

Expected behavior

Like the behavior in vue.js 2

Actual behavior

Error after/while mounting the application

kikuomax commented 11 months ago

@JWaldowPE I have configured a minimalistic project to test Webpack 5 + buefy-next. I was not able to reproduce your error, but I got another issue #28 instead. So we need more specific information to solve the problem.

JWaldowPE commented 11 months ago

I tried to reproduce the error with your repo but couldn't do it. Some more Information Though: Also using SASS as well as some eslint packages, babel, vue-router : image

Package.json: image image

main.js image image imports: image Maybe someone has an idea, I am kinda lost right now :( Coming from Angular and starting with a new vue project

kikuomax commented 11 months ago

@JWaldowPE I think vue-template-compiler does not work with Vue 3. What happens if you replace it with @vue/compiler-sfc?

JWaldowPE commented 11 months ago

still the same error unfortunately, I already had @vue/compiler-sfc installed, forgot to remove the old one - also some more info on the error, its coming from the mount function apparently: image image

JWaldowPE commented 11 months ago

I also tried various different versions of the runtime-core.*-bundler etc - as well as the buefy.esm versions - not sure if it has something to do with that image

wesdevpro commented 11 months ago

I tried to reproduce the error with your repo but couldn't do it. Some more Information Though: Also using SASS as well as some eslint packages, babel, vue-router : image

Package.json: image image

main.js image image imports: image Maybe someone has an idea, I am kinda lost right now :( Coming from Angular and starting with a new vue project

@JWaldowPE did you remove that extra S after your first rule?

JWaldowPE commented 11 months ago

Yes of course - just a screenshot fail

wesdevpro commented 9 months ago

@JWaldowPE

still the same error unfortunately, I already had @vue/compiler-sfc installed, forgot to remove the old one - also some more info on the error, its coming from the mount function apparently: image image

Can you send me the full stack trace error message?

JWaldowPE commented 8 months ago

Hi, sorry for the late answer: unfortunately I do not have any more Information than in my First post: Uncaught (in promise) TypeError: this.genNavbar is not a function at Proxy.render (navbar.js:390:1) at renderComponentRoot (runtime-core.esm-bundler.js:816:1) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5701:1) at ReactiveEffect.run (reactivity.esm-bundler.js:178:1) at instance.update (runtime-core.esm-bundler.js:5814:1) at setupRenderEffect (runtime-core.esm-bundler.js:5822:1) at mountComponent (runtime-core.esm-bundler.js:5612:1) at processComponent (runtime-core.esm-bundler.js:5565:1) at patch (runtime-core.esm-bundler.js:5040:1) at mountChildren (runtime-core.esm-bundler.js:5284:1)

image

Is there a place where I can see/Log more?

JWaldowPE commented 8 months ago

I do indeed have some more warnings, maybe they are helpful in some way?

[Vue warn]: Property "genNavbar" was accessed during render but is not defined on instance. 
  at <BNavbar> 
  at <Header key=4 > 
  at <App>

warn | @ | runtime-core.esm-bundler.js:41
-- | -- | --
  | get | @ | runtime-core.esm-bundler.js:2971
  | render | @ | navbar.js:390
  | renderComponentRoot | @ | runtime-core.esm-bundler.js:816
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5701
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | render | @ | runtime-core.esm-bundler.js:6332
  | mount | @ | runtime-core.esm-bundler.js:3824
  | app.mount | @ | runtime-dom.esm-bundler.js:1431
  | (anonymous) | @ | main.js:154
  | Promise.then (async) |   |  
  | ./src/main.js | @ | main.js:154
  | __webpack_require__ | @ | bootstrap:789
  | fn | @ | bootstrap:100
  | 0 | @ | main.js:136182
  | __webpack_require__ | @ | bootstrap:789
  | (anonymous) | @ | bootstrap:856
  | (anonymous) | @ | bootstrap:856

Second one: 

[Vue warn]: Unhandled error during execution of render function 
  at <BNavbar> 
  at <Header key=4 > 
  at <App>

warn | @ | runtime-core.esm-bundler.js:41
-- | -- | --
  | logError | @ | runtime-core.esm-bundler.js:216
  | handleError | @ | runtime-core.esm-bundler.js:208
  | renderComponentRoot | @ | runtime-core.esm-bundler.js:853
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5701
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | render | @ | runtime-core.esm-bundler.js:6332
  | mount | @ | runtime-core.esm-bundler.js:3824
  | app.mount | @ | runtime-dom.esm-bundler.js:1431
  | (anonymous) | @ | main.js:154
  | Promise.then (async) |   |  
  | ./src/main.js | @ | main.js:154
  | __webpack_require__ | @ | bootstrap:789
  | fn | @ | bootstrap:100
  | 0 | @ | main.js:136182
  | __webpack_require__ | @ | bootstrap:789
  | (anonymous) | @ | bootstrap:856
  | (anonymous) | @ | bootstrap:856
wesdevpro commented 5 months ago

I do indeed have some more warnings, maybe they are helpful in some way?

[Vue warn]: Property "genNavbar" was accessed during render but is not defined on instance. 
  at <BNavbar> 
  at <Header key=4 > 
  at <App>

warn | @ | runtime-core.esm-bundler.js:41
-- | -- | --
  | get | @ | runtime-core.esm-bundler.js:2971
  | render | @ | navbar.js:390
  | renderComponentRoot | @ | runtime-core.esm-bundler.js:816
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5701
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | render | @ | runtime-core.esm-bundler.js:6332
  | mount | @ | runtime-core.esm-bundler.js:3824
  | app.mount | @ | runtime-dom.esm-bundler.js:1431
  | (anonymous) | @ | main.js:154
  | Promise.then (async) |   |  
  | ./src/main.js | @ | main.js:154
  | __webpack_require__ | @ | bootstrap:789
  | fn | @ | bootstrap:100
  | 0 | @ | main.js:136182
  | __webpack_require__ | @ | bootstrap:789
  | (anonymous) | @ | bootstrap:856
  | (anonymous) | @ | bootstrap:856

Second one:

[Vue warn]: Unhandled error during execution of render function 
  at <BNavbar> 
  at <Header key=4 > 
  at <App>

warn | @ | runtime-core.esm-bundler.js:41
-- | -- | --
  | logError | @ | runtime-core.esm-bundler.js:216
  | handleError | @ | runtime-core.esm-bundler.js:208
  | renderComponentRoot | @ | runtime-core.esm-bundler.js:853
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5701
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | mountChildren | @ | runtime-core.esm-bundler.js:5284
  | mountElement | @ | runtime-core.esm-bundler.js:5191
  | processElement | @ | runtime-core.esm-bundler.js:5156
  | patch | @ | runtime-core.esm-bundler.js:5028
  | componentUpdateFn | @ | runtime-core.esm-bundler.js:5708
  | run | @ | reactivity.esm-bundler.js:178
  | instance.update | @ | runtime-core.esm-bundler.js:5814
  | setupRenderEffect | @ | runtime-core.esm-bundler.js:5822
  | mountComponent | @ | runtime-core.esm-bundler.js:5612
  | processComponent | @ | runtime-core.esm-bundler.js:5565
  | patch | @ | runtime-core.esm-bundler.js:5040
  | render | @ | runtime-core.esm-bundler.js:6332
  | mount | @ | runtime-core.esm-bundler.js:3824
  | app.mount | @ | runtime-dom.esm-bundler.js:1431
  | (anonymous) | @ | main.js:154
  | Promise.then (async) |   |  
  | ./src/main.js | @ | main.js:154
  | __webpack_require__ | @ | bootstrap:789
  | fn | @ | bootstrap:100
  | 0 | @ | main.js:136182
  | __webpack_require__ | @ | bootstrap:789
  | (anonymous) | @ | bootstrap:856
  | (anonymous) | @ | bootstrap:856

I have never seen these errors before and I want to say this may be a setup-specific issue. @JWaldowPE however, unless we can get more information or maybe a minimalistic reproduction of the problem I do not think @kikuomax and I can do much debugging.

wesdevpro commented 5 months ago

image