-
Notifications
You must be signed in to change notification settings - Fork 50.2k
Closed
Closed
Copy link
Description
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.jswith 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:
| // 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.
leo-mendoza-qatalog, mohitgarg and almex-v-song
