Suspense: DOMException: Failed to execute 'insertBefore' on 'Node'

[lxsmnsyc]

• Check if updating to the latest Preact version resolves the issue

Describe the bug
If there are multiple components that suspended at the same time and tried to resolve at the same time, there's a chance that only one of the components will successfully re-render while the rest stays in their fallback state. I'm not sure the specificity but I think one of the reasons is that Preact fails to match the component vdom to the actual dom node.

Once it fails to resolve, it throws this error:

This may also happen if one of the components, that isn't suspending, updates during the resolution timeframe.

A softfix for this is to wrap Suspending components with a container like a simple <div>.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/github/LXSMNSYC/preact-suspense-poc
2. Click on Reload button rapidly.
3. Check Console for error message.

Expected behavior

Should've been able to continuously retain the same behavior prior to the error.

[benjamincombes]

I have the same problem, just tried Preact for the first time, and I get this error anytime I start my app... Unfortunately, the softfix does not work for me, so I just can't use Preact until it's fixed.

[JoviDeCroock]

This issue seems fixed with Preact 10.8.2 https://codesandbox.io/s/misty-cloud-u5et4t, closing for now but feel free to reopen if the issue persists for you.

[Brisstor]

Hey there! The issue appeared with Preact 10.11.2

[peacepostman]

Hello ! I'm still having this problem with 10.11.3

If it can help, I was playing with each release and it seems that everything is working fine with the 10.9.0, every above version are randomly giving this error.

So technically something related with the 10.10.0 can be causing this random issue

[alfredsgenkins]

As a possible fix to already compiled bundle, the following can be used:

webpackConfig.module.rules.push({
    test: new RegExp('preact/compat'),
    loader: require.resolve('./preact-patch'),
});

And the loader contents:

module.exports = function patchPreact(rawSource) {
    const originalCode = `t.__e&&r.insertBefore(t.__e,t.__d)`;
    const newCode = `t.__e&&r&&r.insertBefore(t.__e,t.__d)`;
    return rawSource.replace(originalCode, newCode);
};

But indeed, why is not the originalParent checked? #3149

[BennyAlex]

Hello, I am also getting this error, is there a fix or can we reopen this issue?

[SaiHarsha-Sahukari]

Hi, Seems the issue occures in the latest version aswell. can anyone share the solution/fix for this.

[midoh7]

Hi, I'm having the same error from the latest version, whats the way forward please?

[SchlagerKhan]

A softfix for this is to wrap Suspending components with a container like a simple <div>.

---

This solved it for my particular case :)