[DevTools Bug]: React 17 error while trying to inspect hooks "Context reads do not line up with context dependencies."

[gdeedlerthryv]

Website or app

https://github.com/gdeedlerthryv/react-dev-tools-test/

Repro steps

1. Inspect TestApp component
2. Get error

backendManager.js:117 React DevTools encountered an error while trying to inspect hooks. This is most likely caused by an error in current inspected component: "TestApp".
The error thrown in the component is: 

 Error: Context reads do not line up with context dependencies. This is a bug in React Debug Tools.
    at H (react-debug-tools.production.min.js:14:310)
    at Proxy.useContext (react-debug-tools.production.min.js:18:40)
    at Object.useContext (chunk-GGTEBMAR.js?v=b51a6ac3:1125:29)
    at useLocation (chunk-PFB6EJD6.js?v=b51a6ac3:3382:16)
    at TestApp (main.jsx:13:20)
    at R (react-debug-tools.production.min.js:32:287)
    at exports.inspectHooksOfFiber (react-debug-tools.production.min.js:35:150)
    at inspectElementRaw (renderer.js:3379:36)
    at Object.inspectElement (renderer.js:3716:38)
    at agent.js:420:18

Issue was introduced by DevTools 5.1.0 release, I think this PR is the culprit. I built the 5.0.2 extension and the error did not occur:

I wasn't able to repro the issue without external libraries, but someone who knows better probably could.

How often does this bug happen?

Every time

DevTools package (automated)

No response

DevTools version (automated)

No response

Error message (automated)

No response

Error call stack (automated)

No response

Error component stack (automated)

No response

GitHub query string (automated)

No response

[Dokki]

Same...

[eps1lon]

Thank you for the report! The underlying cause is calling useContext multiple times in the same component with the same context.

This is only a bug with React DevTools using React 17 and below. React 18 and above work fine. Should be fixed once #28974 is released.

In the meantime, you can install the unpacked extension from the branch when working with React 17 and below. Download https://output.circle-artifacts.com/output/job/03edee00-b0d2-48a2-b4b9-7e190c1ac521/artifacts/0/build/devtools/chrome-extension.zip, unpack it, go to chrome://extensions/, enable developer mode, click on "load unpacked extension" and select the unpacked chrome-extension (and make sure to disable any previously installed React Developer Tools extension).

[gdeedlerthryv]

Thank you!

[sandasan]

Thank you so much!

[zjtt]

感谢

[AllenAttuned]

Thanks for sharing the details on the issue @eps1lon. I'm looking forward to the update. Do you have a bundle for a Firefox version of the extension?

[zjtt]

收到啦，谢谢