Extension causing pages to error.

[ariesclark]

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

ced2eb8edb6521c4.mp4

[koba04]

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

[waldothedeveloper]

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

[panteliselef]

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]

@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]

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

[koba04]

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

[koba04]

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]

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