Invalid handler for event "click"

[blackyzero]

What is your question / Please describe your issue

Hello,

I am getting following issue from browser console when opening homepage or product page.

[Vue warn]: Invalid handler for event "click": got undefined

found in

---> <SfBottomNavigationItem> at node_modules/@storefront-ui/vue/src/components/organisms/SfBottomNavigation/_internal/SfBottomNavigationItem.vue
       <SfBottomNavigation> at node_modules/@storefront-ui/vue/src/components/organisms/SfBottomNavigation/SfBottomNavigation.vue
         <BottomNavigation> at components/BottomNavigation.vue
           <Anonymous>
             <LazyHydrate>
               <DefaultLayout> at layouts/default.vue
                 <Root>

Any idea on how could i correct it?
Thank you.

What version of vendure are you using?

1.6.2

Code of Conduct

• I agree to follow this project's Code of Conduct

[Baroshem]

Thanks for reporting that! I will review and fix it in the upcoming days :)

[cboothe]

@Baroshem is this fixed in the next release?

I was able to reproduce using yarn dev on Vendure 1.7.1 however if I use nuxt build and nuxt start it doesn't have this issue.

[Baroshem]

Hey @cboothe

Sorry for no contact. I was on long holidays.

I will fix this bug and several other small bugs for the planned 2.0.0 version. This is the frontend bug so it can also be fixed on your side but I will release all bugfixes alongside this newest version I am working on for some time.

[den-kar]

Hello everybody,
Regarding the second error

Parent: ...
Mismatching childNodes vs. VNodes: ...
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. ...

I had the same error with the plain vsf-vendure-template. The error only occured when loading the page with a non-empty wishlist or cart.

After wrapping the SfBadge components in components/AppHeader.vue into the ClientOnly component the error disappeared.

From:

...
<SfBadge v-if="wishlistTotalItems" class="sf-badge--number cart-badge">{{wishlistTotalItems}}</SfBadge>
...
<SfBadge v-if="cartTotalItems" class="sf-badge--number cart-badge">{{cartTotalItems}}</SfBadge>
...

To:

...
<ClientOnly>
  <SfBadge v-if="wishlistTotalItems" class="sf-badge--number cart-badge">{{wishlistTotalItems}}</SfBadge>
</ClientOnly>
...
<ClientOnly>
  <SfBadge v-if="cartTotalItems" class="sf-badge--number cart-badge">{{cartTotalItems}}</SfBadge>
</ClientOnly>
...