React: Bug: DevTools extension component tree view crashes on empty Suspense element

[Wedvich]

React version: 16.13.1 (also tested with versions down to 16.9.0)
DevTools extension version: 4.8.1 (Firefox), 4.8.0 (Chrome)

Steps To Reproduce

1. Create a new app using create-react-app
2. Replace the contents of App.js with this:

import React, { Suspense } from "react";

function App() {
  return <Suspense></Suspense>;
}

export default App;

The current behavior

The component tree renders up until the empty <Suspense> element, and an error is printed to the console.

Example from a production app:

Error stack trace (more or less same as in Chrome):

Uncaught TypeError: e.child is null
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1029
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1029
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1029
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    Me moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1020
    flushInitialOperations moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1262
    flushInitialOperations moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1257
    o moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:2068
    emit http://localhost:8080/4301/superreports/1359398:1
    emit http://localhost:8080/4301/superreports/1359398:1
    i moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:2075
    y moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:2076
    y moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:2076
    e moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1776
    e moz-extension://3b85dd64-f11d-4480-a0a9-2f6ad211ca37/build/react_devtools_backend.js:1779

The line in question is this:

// Special case: if Suspense mounts in a timed-out state,
// get the fallback child from the inner fragment and mount
// it as if it was our own child. Updates handle this too.
var u=e.child,c=u?u.sibling:null,s=c?c.child:null;null!==s&&Me(s,a?e:t,!0,r)}else{var f=-1===$?e.child:e.child.child;null!==f&&Me(f,a?e:t,!0,r)}else null!==e.child&&Me(e.child,a?e:t,!0,r);

Which points to this location in the source code:
https://github.com/facebook/react/blob/30b47103d4354d9187dc0f1fb804855a5208ca9f/packages/react-devtools-shared/src/backend/renderer.js#L1221

The expected behavior

I can view the component tree in React DevTools with no error.

[Wedvich]

Some additional notes:

• I downgraded to 4.7.0 and the error did not occur, so this appears to be a regression in 4.8.x.
• Even when it doesn't crash, 4.8.x truncates the tree under some Suspense nodes. In 4.7.0 the full tree is rendered as expected. I don't have a simple repro for this behavior though.

[bvaughn]

I don't have a simple repro for this behavior though.

Does this mean that the repro in the description doesn't work? Or something else?

[Wedvich]

Does this mean that the repro in the description doesn't work? Or something else?

No, the repro works for the crash. But I don't have a repro for what happens when it truncates Suspense nodes further down the tree. Here's an example:

The highlighted Suspense node has a lot of nodes under it, but in 4.8 they're not shown. Here's that same node in 4.7:

But maybe that's a separate issue?

[bvaughn]

Gotcha.

Any way you could share access to the app that demonstrates this problem with me or another team member (so we could debug the cause)?

[Wedvich]

Yup, left a DM.

[moimikey]

encountered this as well. there's a check for .child but not .child.child therefore the <Suspense>needs children to not error in dev tools </Suspense>. In my case, here's my code:

        <React.Suspense fallback={<div>Loading...</div>}>
          {this.props.store.currentLocation && <LocationConfirmation {...this.props} />}
        </React.Suspense>

children in this case ends up being undefined if store.currentLocation doesn't coerce to true, which is fine for Suspense, which types children as optional. Seems like devtools isn't accounting for the lack of a child element?

[bvaughn]

I can't reproduce either of the reported behaviors (the crash or the half-empty Components tree) using the repro steps provided- neither in DevTools UI nor in a unit test.

@Wedvich @moimikey Can you create a Code Sandbox for me that causes this crash? That way I can be sure there aren't some missing steps?

Edit I believe this is due to the combination of React version and DevTools version. This indicates that a change was made to React (in master) and DevTools so that they don't break together, but does break with an older version. I will dig in.

I suspect a PR like #19108.

[bvaughn]

Definitely looks like something got broken by a recent internal refactor that impacts multiple tests too. I'll dig in further.

[Wedvich]

Tested with building the extension from the latest master now and the null-child crash is fixed 👍 However, the missing nodes under the Suspense element (https://github.com/facebook/react/issues/19320#issuecomment-657095879) are still missing. Should I open a separate issue for that, or is it already being looked at?

[bvaughn]

However, the missing nodes under the Suspense element (#19320 (comment)) are still missing.

Please open a new issue, with repro steps. If you can share a repro with us, it's likely to get fixed quickly. If not, it may not get fixed for a while because I haven't seen that behavior.