[DevTools Bug]: TypeError: ie.handlePostCommitFiberRoot is not a function

[rickhanlonii]

Website or app

https://codesandbox.io/s/goofy-bas-n5djr8

Repro steps

I believe this is a bug when using React DevTools v4.x.x (not 5.x.x) with react-dom@19.0.0-canary-xxx. It currently errors in embeded code sandbox (which embeds v4 of DevTools) but not when you open in a new tab (I have DevTools 5.xx installed).

To repo, create an error boundary, and throw an error inside it using the 19 canary and v4 of DevTools.

Or, see the sandbox link above and:

1. View sandbox
2. Click "throw error"
3. Observe "handlePostCommitFiberRoot is not a function" in console

How often does this bug happen?

Every time

DevTools package (automated)

embeded code sandbox version

DevTools version (automated)

4.4.0-f749045a5

Error message (automated)

handlePostCommitFiberRoot is not a function

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[hoxyq]

How can I actually open RDT in codesandbox? I remember having this panel previously, but can't find it now, can only open Chrome's DevTools with Elements / Console panels.

Also, I don't expect RDT v4 to work with React 19, we only try to keep RDT to be backwards-compatible with previous versions of React, not the other way.

[rickhanlonii]

Oh wow, weird, when I load it up today, the embedded devtools is the actual chrome console and I don't have React Dev Tools.

Makes sense that we don't support the other direction, but should we log a warning / show a dialog, and not inject the backend so you don't get errors?

[hoxyq]

Makes sense that we don't support the other direction, but should we log a warning / show a dialog, and not inject the backend so you don't get errors?

Agree, would be nice to add this to DevTools.