vuestorefront/storefront-ui

[Bug]: Hydration Missmatch when using `SfListItem` in Nuxt 3

Baroshem opened this issue · 2 comments

Baroshem commented

Describe the Bug

I have copied the Filters (Category) component into Nuxt application and experienced the error in the console and wrong behavior in the browser:

[Vue warn]: Hydration children mismatch in <li>: server rendered element contains fewer child nodes than client vdom. 
  at <SfAccordionItem modelValue=true onUpdate:modelValue=fn class="w-full md:max-w-[376px] mt-6" >

Expected behavior

Error should not be thrown and component should work correctly

Steps to reproduce

  1. Copy the source code from https://docs.storefrontui.io/v2/vue/blocks/Filters.html#category into Nuxt app
  2. Observer warning and wrong behavior

SFUI version

"@storefront-ui/vue": "^2.5.0",

Framework

Vue, Nuxt

Node version

v16.20.0

Browser

Brave (Chrome)

OS

MacOS

Relevant log output

[Vue warn]: Hydration children mismatch in <li>: server rendered element contains fewer child nodes than client vdom. 
  at <SfAccordionItem modelValue=true onUpdate:modelValue=fn class="w-full md:max-w-[376px] mt-6" >


### Able to fix / change the documentation?

- [ ] Yes
- [X] No

### Code of Conduct

- [X] I agree to follow this project's Code of Conduct
Szymon-dziewonski commented

Hey @Baroshem thanks for this bug ticket, it will be fixed within this PR and released with 2.6.0 package

Szymon-dziewonski commented

Pull Request with fix was merged, closing issue task for now, thanks @Baroshem !:)