Error: Client side hydrated component includes client side hydrated sub component.
See original GitHub issueHi!
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
<script>
import Reactive from '@/components/Reactive.svelte';
export let data;
</script>
<Reactive hydrate-client={{ data }} />
And then in the Reactive.svelte file:
// Reactive.svelte
<script>
import SubReactive from '@/components/SubReactive.svelte';
export let data;
</script>
<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:
- Created 3 years ago
- Comments:8 (5 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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 aPage.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.
@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!