Unrecoverable error in <Root>

[zwergius]

Describe the bug After updating to 3.38 I am seeing errors in the console, downgrading to 3.37 seems to resolve the issue

Logs

To Reproduce Happens in my svelteKit project on initial load

[johngrasty]

I’m seeing the same, but I haven’t been able to make a minimal reproducible example. In my one project, I see it when I use: {@html }

[johngrasty]

So with my example where {@html } is causing this error, it seems to be related to #6274. When I remove <div id="svelte">%svelte.body%</div> and set target: 'body' in svelte.config.cjs, both this error and the error from #6274.

[Conduitry]

Can you try 3.38.1? That should have fixed #6274 and so may also fix this.

[kharanenka]

I still have the error with using {@html ...} in 3.38.1 version too... Bug with duplication was fixed in 3.38.1 version.

[johngrasty]

@Conduitry @kharanenka Likewise for me 3.38.1 fixed the duplication issue, but it did not fix this {@html…} error. However removing %svelte.body% and targeting the body in svelte.config.cjs resolves both. I have not been able to create a minimal working example though. In my larger project, I am using mdsvex…maybe connected, maybe not.

[kharanenka]

I try to remove <div id="svelte">...</div> and configure target to body, but i have both error on 3.38.0 version and {@html…} error on 3.38.1 version. It doesn't fix my project.

[johngrasty]

So upon further investigation, the workaround of removing %svelte:body% leads to, as one would expect, breaking of prerendering.

[johngrasty]

First, sorry that I am not more capable in debugging and fixing such things!

Second, at least in my case, I have narrowed down the problem. I am rendering an SVG with {@html }, and the error is coming from this line: https://github.com/sveltejs/svelte/blob/94bfeae5d560e229b8add61838ce1804c7d74c90/src/runtime/internal/dom.ts#L15

Here's the function

function end_hydrating() {
    is_hydrating = false;
    for (const node of nodes_to_detach) {
        node.parentNode.removeChild(node);
    }
    nodes_to_detach.clear();
}

When I do some console logging, I see in my project a number of #text nodes and a few svg nodes. When I look at node.parentNode, it is null for the svg nodes, and that is when I am hitting this error. If I replace the {@html bunch of svg code} with just the svg code, there is no error.

Maybe this will help a bit.

[zwergius]

Hi again

3.38.1 does not fix the issue in my case...

So based on other comments in this issue I did a bit of further digging, I also target directly, so adding back in

did not change anything in my case.

I also use {@html ...} in various places, among others in my $layout, removing this line does solve the issue.. I still use it in other places and they keep working without throwing errors..

I hope this helps narrowing it down!

Thanks

[johngrasty]

I'm still trying to reproduce this in a minimal example repo, but I did discover something in my project:

This snippet sees the error mentioned above:

<div>
     {@html item.icon}
</div>

but this works and does not get the error:

<div>
     {@html '<div />'}
     {@html item.icon}
</div>

I don't know why, but maybe it will help those working on this.

[zwergius]

Hi again,

Spun up this reproduction repo

https://github.com/zwergius/svelte-issue-6273

** With recent svelte 3.38.2 issue does NOT exist

Hope this helps

[johngrasty]

@zwergius It's great that you were able reproduce this in a simple way! Most likely the problem does not exist in 3.38.2, because they ended up reverting the hydration changes in #6290.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been closed as it was previously marked as stale and saw no subsequent activity.