🐛 BUG: client:load causes hydration sync errors for vue component when using a store

[songololo]

What version of astro are you using?

0.23.0

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

I have a vue component which works as expected when used without a client: directive, e.g.

<TestC />

But when adding the directive, i.e.

<TestC client:load/>

Then it will load OK on the first load, but afterwards starts returning one of the following two types of errors:

[Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <NavTree currentPath="/" > 
  at <App>
Hydration completed but contains mismatches.

or

Uncaught (in promise) Error: Unable to find the root for the component TestC

The issue seems to arise because I'm using a nanostore to share information about my blog posts between different components, which means that the server-side state and client-side state can diverge.

Please see the reproducible repo link.

Thanks!

Link to Minimal Reproducible Example

https://github.com/songololo/astro-debug

[Bryanoxx]

Hello ! Just for reporting: I have the same error/behavior using the v0.23.1 and with client:visible

[kavaro]

FYI: Same issue with svelte component that uses a svelte store.

[hayley]

Also having this issue:

• upgrade from Astro 0.20.12 to 0.25.4
• svelte component
• uses svelte stores
• edit: also happening with nanostores
• client:visible

Error: Unable to find the root for the component Radar

Edit:
Though nanostores was previously mentioned as a problem, out of curiosity, I wanted to try it in my own setup since the example nanostores project was using client hydration without a problem.

I can confirm though that in my project, both the version using Svelte stores and the version rewritten to use Nanostores will fail with the same component error listed above.

[hayley]

Astro 0.26 update: For the same project of mine previously mentioned, upgrading to Astro 0.26 has not fixed the issue.

I'm still seeing Error: Unable to find the root for the component Radar in the browser console.

[hayley]

Astro 0.26.1 fixes this for me both in the Svelte store and nanostores version.

Based on the changelog (https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md), I'm guessing it was #2978 that fixed this.

To anyone affected by this, I'd encourage you to try 0.26.1 / 1.0 beta.0 to see if it fixes it for you.

[kavaro]

I can confirm that Astro 0.26.1 fixes my issues with svelte
Thanks guys

[FredKSchott]

Sounds like this was fixed in Astro v0.26.1, thanks everyone!