Comments (8)
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
- window.SWR_DEVTOOLS_USE will be populated as long as the extension is installed and enabled.
- the app code runs and
setupDevTools
from swr runs as well, which populateswindow.__SWR_DEVTOOLS_REACT__
with the react running from the app. - 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
.
from swr-devtools.
@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
🤔
from swr-devtools.
I was thinking a similar approach. Would require PR to vercel/swr or is this something that can be solved from the devtools ?
from swr-devtools.
Yeah, This approach requires to send a PR to vercel/swr
.
from swr-devtools.
Thank you for reporting it. I'll investigate it.
from swr-devtools.
I had to disable the extension as well I was getting the same error without even changing my code.
from swr-devtools.
Related Issues (20)
- Performance Issue with large data HOT 2
- Theme Switcher dosn't work
- Add a test to guarantee web-accessible.js doesn't not include React
- After a short period of time, Cache and History tabs stop updating HOT 2
- How to disable SWR-devtools on Production HOT 3
- swr-devtools.vercel.app has been blocked HOT 1
- Doesn't work on brave browser without SWRDevTools component HOT 3
- Pretty Printed Key? HOT 1
- Support `useSWRSubscription`
- Uncaught Error: Extension context invalidated HOT 5
- SWRDevTools tab doesn't render anything HOT 1
- Use SVG files instead of Emoji
- revalidateFirstPage has been never resolved
- Display config values
- Empty extension HOT 27
- Support SSR HOT 3
- Avoid throwing an Error when passing non-serializable values
- Feat: Add manual dark mode support HOT 1
- swr-devtools not working on edge.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from swr-devtools.