Timing bug with Suspense render results in TypeError: Cannot set property '0' of null.

[msluther]

The app crash I'm seeing originates from here and surfaced as TypeError: Cannot set property '0' of null.

This was discovered during an application reworking to use preact rather than react. The bug does not repro with react.

Reproduction

CodeSandbox available here
Minimal repo showing the issue is available here

Steps to reproduce

Force a re-render of a component hosting the <Suspense /> element before the initial fallback has rendered. In the minimal repro and my case, this was happening because something was being calculated and put into state during componentDidMount.

Suspense thinks it needs to render the fallback and detach the lazy component, however, because of the external re-render, there are no children in the vnode

Expected Behavior

Either the lazy is rerun, or the fallback is rendered.

Actual Behavior

The app crashes with TypeError: Cannot set property '0' of null.

[dev-johnny-gh]

same here, i'm using lazy route in my app too.

i output some debug message via console and i found out this error message was threw by preact compat, when it is loading lazy route.

but i can't find where the bug is exactly.

[dev-johnny-gh]

according to #2519 , i downgrade preact to 10.0.5 and this bug is gone.

[VitaliiPyvovar]

It is broken on version 10.5.7, suspense works on version 10.4.6

[marvinhagemeister]

@VitaliiPyvovar what is broken? Can you file a new issue for that? We'd love to take a look at it, but we need more information than "something is broken".

[iMakedonsky]

Suspense causes following error on preact 10.5.12:
Cannot set property __h of null;

While on latest 16.x react, everything works fine.

I used webpack aliases from docs.

This happens when I focus into this component in project running on create-react-app+craco+typescript.

[rdalmas]

@iMakedonsky I fixed after lazy loading the module encapsulated within the Suspense. Have you tried that?

[iMakedonsky]

@rdalmas there were a couple of issues with suspense.

1. multiple lazy children inside suspense with preact/compat is causing one such bug. Fixed by wrapping only one lazy child inside a Suspense.
2. There is a problem with components triggering onClick callbacks after being unmounted. Fixed by:

import { options } from 'preact';
options.debounceRendering = setTimeout;

3. There are hydrate issues if you're using ssr/prerendering. Resolved by using preact-iso.lazy/hydrate instead of regular lazy/hydrate

[rdalmas]

@iMakedonsky You saved me hours of debugging with the #2. Thanks!

[imgalli]

Hi, is it likely that there'll be any progress on this? Am currently reverting to 10.5.4.

I can see there was a PR but this was closed? #3128

[davidrhoderick]

This shouldn't be closed (or maybe a new issue should be made) because as of 10.5.14, I get a t.__H is null error. When I downgrade to 10.5.4 as per @imgalli suggests, it goes away.

[tony-scio]

This issue still exists in 10.8.2. I can't get anything later than 10.5.4 to work.

[theninthsky]

@marvinhagemeister
Still happens in 10.10.0. I suspense my entire app (that might be the cause).

This is the repo: https://github.com/theninthsky/client-side-rendering/tree/preact
Simply npm i and npm start.

You can even try the preview deploy here: https://6c71c4b6.client-side-rendering.pages.dev

Try moving between pages and refreshing until this error is encountered (it's inconsistent).