Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Create a new app using create-react-app
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.

Issue Analytics

State:
Created 3 years ago
Reactions:3
Comments:10

Top GitHub Comments

1reaction

bvaughncommented, Jul 14, 2020

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.

1reaction

bvaughncommented, Jul 13, 2020

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

Top Results From Across the Web

React dev tools blank component - Stack Overflow

Open the DevTools and do a ctrl+shift+p and then Reload DevTools . Unless there is an error in your app, this should help....

react-devtools | Yarn - Package Manager

react-devtools. This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).

vue-devtools - Awesome JS

Bug Fixes ; api: proxy mode now() fallback (fb8bb9e) ; components: selected node colors (8b7c4af) ; timeline: no events empty pane not updating...

Issues: Find and fix problems - Chrome Developers

In the AFFECTED RESOURCES section, click on a resource link to view the item in the appropriate context within DevTools.

CHANGELOG.md · cbae955d80d05eafe809f7504502e7fea4acf4a5 ...

Fix bug in legacy mode Suspense where effect clean-up functions are not fired. ... and display a fallback UI instead of the component...