Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: Client side hydrated component includes client side hydrated sub component.

See original GitHub issue


First of all, thank you so much for you and your team’s work. Elderjs looks really powerful and is a much needed addition to the Svelte ecosystem.

I’m trying to port a Sapper site to Elderjs and I’m running into the issue of having reactive sub-components not being supported (By reactive, I mean client-side hydrated, in order to use Svelte’s reactivity features).

To be clearer, I’m trying to do something like:

// Page.svelte
import Reactive from '@/components/Reactive.svelte';

export let data;

<Reactive hydrate-client={{ data }} />

And then in the Reactive.svelte file:

// Reactive.svelte
import SubReactive from '@/components/SubReactive.svelte';

export let data;

<SubReactive {data.releventData} />

I have several nested components like this, but only the top one has the “hydrate-client” prop. Yet I’m still getting the error message from this issue’s title.

Am I doing something wrong or is this really impossible in Elderjs?

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

f-elixcommented, Oct 2, 2020

Ok that debugging log was actually very useful!

I no longer have this error. My guess is that the problem was with the naming of the components. It might be worth looking into it.

I have a Page.svelte route template that imports a Page.svelte component (which has the hydrate-client prop). A soon as I renamed my component to something else, the error went away. I thought both files having the same name would be ok since they are not in the same folder, but apparently this was the problem.

Unfortunately I can’t say with 100% certainty that the problem is resolved because even though I can now see the rendered site, the javascript (and all reactivity) fails due to, I think, other errors between Elderjs and my code that I don’t know how to fix yet (for example, accessing process.env inside my components is not possible right now).

I’ll try to get everything working on my side during the weekend, or at least get rid of any errors, and get back to you.

f-elixcommented, Oct 3, 2020

@nickreese All right I got most things working, at least without getting any errors, so I can now confirm that it was definitely the naming problem that was causing the error. The Svelte directives weren’t a problem for me, but that’s still good to know.

With that resolved, I’m going to close the issue.

Thank you so much for your help!

Read more comments on GitHub >

github_iconTop Results From Across the Web

browser.hydrate: false breaks client-side router #4382 - GitHub
Setting browser.hydrate to false renders the client-side router unusable whilst not disabling it. This results in the following behaviour:.
Read more >
Handling the React server hydration mismatch error
How to resolve the server mismatch error when hydrating a shared React component that can be used in client-side only or server-side rendered ......
Read more >
React 18: Hydration failed because the initial UI does not ...
This make the app client-side render, it's work for me: export default function MyApp({ Component, pageProps }: AppProps) { const [showChild ...
Read more >
Debugging and fixing hydration issues - somewhat abstract
So, this week, let's dig into that hydration issue with some ideas on how to debug it and how to fix it.
Read more >
Understanding React Hydration | Gatsby
Hydration is the process of using client-side JavaScript to add application state and interactivity to server-rendered HTML. It's a feature of React, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found