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

Hi!

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?

[f-elix]

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-elix]

@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!