search

koba04 / swr-devtools

A DevTool for SWR
https://swr-devtools.vercel.app
MIT License
217 stars 3 forks source link

Extension causing pages to error. #125

Closed ariesclark closed 9 months ago

ariesclark commented 10 months ago

Try visiting https://dashboard.clerk.com/ with this extension enabled on Firefox, other browsers/websites not tested.

https://github.com/koba04/swr-devtools/assets/10256477/0e8c33bb-6ee5-4332-8cf9-70c7d04aea3e

koba04 commented 10 months ago

Thank you for reporting it. I'll investigate it.

waldothedeveloper commented 10 months ago

I had to disable the extension as well I was getting the same error without even changing my code.

panteliselef commented 10 months ago

Hello @koba04 I'm part of the team at Clerk at hopefully I'll shed some light as what is happening.

Background knowledge

The Clerk components load their own version of react-dom. Inside of these components swr is beeing used. I have managed to replicate this error only when swr is used both from the hosted app and the app mount the Clerk components. In the case of our dashboard that is the case.

Deep dive

I had a look at the code base of vercel/swr and swr-devtools (yours). I found that there is "contract" between swr and swr-devtools which involves the usage of window.__SWR_DEVTOOLS_REACT__ and window.__SWR_DEVTOOLS_USE__.

My understanding is that

  1. window.SWR_DEVTOOLS_USE will be populated as long as the extension is installed and enabled.
  2. the app code runs and setupDevTools from swr runs as well, which populates window.__SWR_DEVTOOLS_REACT__ with the react running from the app.
  3. Then our components are being lazy loading and the swr code build within our components will again trigger the following line to execute window.__SWR_DEVTOOLS_REACT__ = React.
koba04 commented 10 months ago

@panteliselef Thank you for the details, which is very helpful! Yes, that's correct.

The error is https://legacy.reactjs.org/docs/error-decoder.html/?invariant=321

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I didn't expect the case of multiple SWRs to be used. This seems to be caused because SWRDevTools uses a different React instance from the app. If so, this might be avoided by assigning window.__SWR_DEVTOOLS_REACT__ = React only if window.__SWR_DEVTOOLS_REACT__ is undefined🤔

panteliselef commented 10 months ago

I was thinking a similar approach. Would require PR to vercel/swr or is this something that can be solved from the devtools ?

koba04 commented 10 months ago

Yeah, This approach requires to send a PR to vercel/swr.

koba04 commented 9 months ago

I just published a new version (1.3.2) to fix this so please try it once the version is available.

The Firefox version is available. https://addons.mozilla.org/en-US/firefox/addon/swr-devtools/ The Chrome version is In review. https://chrome.google.com/webstore/detail/swr-devtools/liidbicegefhheghhjbomajjaehnjned

koba04 commented 9 months ago

I'll close this as closed, but if you had a similar behavior please file a new issue.