Skip to content

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

@Wedvich

Description

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

image

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:

// Special case: if Suspense mounts in a timed-out state,

The expected behavior

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

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions