-
-
Notifications
You must be signed in to change notification settings - Fork 325
ReactJS Invalid Hook Call #646
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
It kind of looks like the error here is coming from |
I'm also not really sure how to debug this at the moment. |
Same here, not entirely certain how to tackle this one. Just wanted to make sure it's documented. We'll probably circle back around to this eventually. |
I'm gonna close and kick back to discussion until there's something actionable. We can create a task for the error boundary though. |
@rmorshea I've determined the root cause of this is an unpinned react bootstrap version. bootstrap = idom.web.module_from_template(
"react", "react-bootstrap", resolve_exports=True
) This issue can easily be replicated by pinning to This issue likely occurs only when my browser has a local version of This issue is pretty much expected behavior. |
I've had this issue happen again, despite pinned versions within |
@Archmonger can you update the trace on this when it happens? I think the client source in the problem area has changed since this was posted. |
Will report back with trace logs once it happens again naturally. I haven't confirmed the stack trace is the same when I force this issue to happen, but at least the error code is identical. |
I had it happen today, but this trace log seems slightly different. react-dom.js:9 TypeError: Cannot read properties of null (reading 'useState')
at r.useState (react.js:2:6860)
at react-bootstrap.js:2:44649
at Ri (react-dom.js:7:19047)
at Hu (react-dom.js:9:10756)
at Js (react-dom.js:9:45976)
at Xs (react-dom.js:9:39741)
at nf (react-dom.js:9:39672)
at Fr (react-dom.js:9:39532)
at lo (react-dom.js:9:36698)
at en (react-dom.js:7:3242)
Yl @ react-dom.js:9
react-dom.js:7 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at r.useState (react.js:2:6860)
at react-bootstrap.js:2:44649
at Ri (react-dom.js:7:19047)
at Hu (react-dom.js:9:10756)
at Js (react-dom.js:9:45976)
at Xs (react-dom.js:9:39741)
at nf (react-dom.js:9:39672)
at Fr (react-dom.js:9:39532)
at lo (react-dom.js:9:36698)
at en (react-dom.js:7:3242)
client.js:23649 The above error occurred in the <_ImportedElement> component:
at _ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31225:29)
at ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31202:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at Layout (http://127.0.0.1:7575/static/django_idom/client.js:31060:19)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ client.js:23649
client.js:2691 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at r.useState (react.js:2:6860)
at react-bootstrap.js:2:44649
at Ri (react-dom.js:7:19047)
at Hu (react-dom.js:9:10756)
at Js (react-dom.js:9:45976)
at Xs (react-dom.js:9:39741)
at nf (react-dom.js:9:39672)
at Fr (react-dom.js:9:39532)
at lo (react-dom.js:9:36698)
at en (react-dom.js:7:3242) |
Given the updated trace I'm thinking that something is wrong with the JS the CDN is giving us. What I'd like to do is implement a template that uses |
On Django IDOM react_devtools_backend.js:3973 TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44811
at ji (react-dom.js:7:19036)
at Zu (react-dom.js:9:10853)
at sa (react-dom.js:9:46246)
at ia (react-dom.js:9:39943)
at ff (react-dom.js:9:39874)
at Fr (react-dom.js:9:39734)
at co (react-dom.js:9:36883)
at on (react-dom.js:7:3250) '\n at _ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31225:29)\n at ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31202:28)\n at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)\n at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)\n at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)\n at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)\n at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)\n at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)\n at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)\n at Layout (http://127.0.0.1:7575/static/django_idom/client.js:31060:19)'
overrideMethod @ react_devtools_backend.js:3973
ql @ react-dom.js:9
Vs.t.callback @ react-dom.js:9
Vu @ react-dom.js:7
oo @ react-dom.js:9
ea @ react-dom.js:9
sf @ react-dom.js:9
pf @ react-dom.js:9
an @ react-dom.js:9
co @ react-dom.js:9
on @ react-dom.js:7
yn @ react-dom.js:9
Ef @ react-dom.js:9
qr @ react-dom.js:9
fe.render @ react-dom.js:9
render @ react-bootstrap.js:10
render @ client.js:30973
(anonymous) @ client.js:31239
invokePassiveEffectCreate @ client.js:27040
callCallback @ client.js:7512
invokeGuardedCallbackDev @ client.js:7561
invokeGuardedCallback @ client.js:7623
flushPassiveEffectsImpl @ client.js:27127
unstable_runWithPriority @ client.js:2976
runWithPriority$1 @ client.js:14840
flushPassiveEffects @ client.js:27000
(anonymous) @ client.js:26877
workLoop @ client.js:2925
flushWork @ client.js:2898
performWorkUntilDeadline @ client.js:2677
react-dom.js:7 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44811
at ji (react-dom.js:7:19036)
at Zu (react-dom.js:9:10853)
at sa (react-dom.js:9:46246)
at ia (react-dom.js:9:39943)
at ff (react-dom.js:9:39874)
at Fr (react-dom.js:9:39734)
at co (react-dom.js:9:36883)
at on (react-dom.js:7:3250)
n.useState @ react.js:2
(anonymous) @ react-bootstrap.js:2
ji @ react-dom.js:7
Zu @ react-dom.js:9
sa @ react-dom.js:9
ia @ react-dom.js:9
ff @ react-dom.js:9
Fr @ react-dom.js:9
co @ react-dom.js:9
on @ react-dom.js:7
yn @ react-dom.js:9
Ef @ react-dom.js:9
qr @ react-dom.js:9
fe.render @ react-dom.js:9
render @ react-bootstrap.js:10
render @ client.js:30973
(anonymous) @ client.js:31239
invokePassiveEffectCreate @ client.js:27040
callCallback @ client.js:7512
invokeGuardedCallbackDev @ client.js:7561
invokeGuardedCallback @ client.js:7623
flushPassiveEffectsImpl @ client.js:27127
unstable_runWithPriority @ client.js:2976
runWithPriority$1 @ client.js:14840
flushPassiveEffects @ client.js:27000
(anonymous) @ client.js:26877
workLoop @ client.js:2925
flushWork @ client.js:2898
performWorkUntilDeadline @ client.js:2677
react_devtools_backend.js:3973 The above error occurred in the <_ImportedElement> component:
at _ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31225:29)
at ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31202:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at Layout (http://127.0.0.1:7575/static/django_idom/client.js:31060:19)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:3973
logCapturedError @ client.js:23649
update.callback @ client.js:23677
callCallback @ client.js:15882
commitUpdateQueue @ client.js:15903
commitLifeCycles @ client.js:24295
commitLayoutEffects @ client.js:26979
callCallback @ client.js:7512
invokeGuardedCallbackDev @ client.js:7561
invokeGuardedCallback @ client.js:7623
commitRootImpl @ client.js:26704
unstable_runWithPriority @ client.js:2976
runWithPriority$1 @ client.js:14840
commitRoot @ client.js:26543
performSyncWorkOnRoot @ client.js:25882
(anonymous) @ client.js:14891
unstable_runWithPriority @ client.js:2976
runWithPriority$1 @ client.js:14840
flushSyncCallbackQueueImpl @ client.js:14886
flushSyncCallbackQueue @ client.js:14873
flushPassiveEffectsImpl @ client.js:27173
unstable_runWithPriority @ client.js:2976
runWithPriority$1 @ client.js:14840
flushPassiveEffects @ client.js:27000
(anonymous) @ client.js:26877
workLoop @ client.js:2925
flushWork @ client.js:2898
performWorkUntilDeadline @ client.js:2677
client.js:2691 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44811
at ji (react-dom.js:7:19036)
at Zu (react-dom.js:9:10853)
at sa (react-dom.js:9:46246)
at ia (react-dom.js:9:39943)
at ff (react-dom.js:9:39874)
at Fr (react-dom.js:9:39734)
at co (react-dom.js:9:36883)
at on (react-dom.js:7:3250) |
@rmorshea Given that this is still happening with preact, do you have any ideas on the cause of this? This is a major roadblock for using exported react packages. |
The switch to Preact is unrelated (that just what IDOM uses internally). What matters is the module template which is still using React and I think it has to remain that way since any component library is going to import With that said, I discovered that the material-ui examples in the docs broke because it was expecting a particular version of React (was seeing similar error messages to these). As of idom |
I am getting the same exception when using a pinned react version bootstrap = idom.web.module_from_template(
"[email protected]", "[email protected]", resolve_exports=True
) react-dom.js:9 TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44649
at Bi (react-dom.js:7:19481)
at bu (react-dom.js:9:1575)
at aa (react-dom.js:9:45971)
at ua (react-dom.js:9:39715)
at pf (react-dom.js:9:39646)
at Ir (react-dom.js:9:39506)
at co (react-dom.js:9:36651)
at on (react-dom.js:7:3250)
bl @ react-dom.js:9
react-dom.js:7 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44649
at Bi (react-dom.js:7:19481)
at bu (react-dom.js:9:1575)
at aa (react-dom.js:9:45971)
at ua (react-dom.js:9:39715)
at pf (react-dom.js:9:39646)
at Ir (react-dom.js:9:39506)
at co (react-dom.js:9:36651)
at on (react-dom.js:7:3250)
client.js:23649 The above error occurred in the <_ImportedElement> component:
at _ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31225:29)
at ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31202:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at Layout (http://127.0.0.1:7575/static/django_idom/client.js:31060:19)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ client.js:23649
client.js:14904 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44649
at Bi (react-dom.js:7:19481)
at bu (react-dom.js:9:1575)
at aa (react-dom.js:9:45971)
at ua (react-dom.js:9:39715)
at pf (react-dom.js:9:39646)
at Ir (react-dom.js:9:39506)
at co (react-dom.js:9:36651)
at on (react-dom.js:7:3250)
client.js:31312 IDOM WebSocket connection lost. Reconnecting in 1 seconds...
client.js:31277 WebSocket connection to 'ws://127.0.0.1:7575/idom/conreq._core.home.components.homepage/?kwargs=%7B%7D' failed:
mountLayoutWithReconnectingWebSocket @ client.js:31277
client.js:31312 IDOM WebSocket connection lost. Reconnecting in 3 seconds...
client.js:31282 IDOM WebSocket connected.
react-dom.js:9 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.X (react-dom.js:7:19215)
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44811
at ji (react-dom.js:7:19036)
at Zu (react-dom.js:9:10853)
at sa (react-dom.js:9:46246)
at ia (react-dom.js:9:39943)
at ff (react-dom.js:9:39874)
at Fr (react-dom.js:9:39734)
at co (react-dom.js:9:36883)
ql @ react-dom.js:9
react-dom.js:7 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.X (react-dom.js:7:19215)
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44811
at ji (react-dom.js:7:19036)
at Zu (react-dom.js:9:10853)
at sa (react-dom.js:9:46246)
at ia (react-dom.js:9:39943)
at ff (react-dom.js:9:39874)
at Fr (react-dom.js:9:39734)
at co (react-dom.js:9:36883)
client.js:23649 The above error occurred in the <_ImportedElement> component:
at _ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31225:29)
at ImportedElement (http://127.0.0.1:7575/static/django_idom/client.js:31202:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at StandardElement (http://127.0.0.1:7575/static/django_idom/client.js:31094:28)
at Element (http://127.0.0.1:7575/static/django_idom/client.js:31076:20)
at Layout (http://127.0.0.1:7575/static/django_idom/client.js:31060:19)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ client.js:23649
client.js:2691 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Object.X (react-dom.js:7:19215)
at n.useState (react.js:2:6785)
at react-bootstrap.js:2:44811
at ji (react-dom.js:7:19036)
at Zu (react-dom.js:9:10853)
at sa (react-dom.js:9:46246)
at ia (react-dom.js:9:39943)
at ff (react-dom.js:9:39874)
at Fr (react-dom.js:9:39734)
at co (react-dom.js:9:36883) |
Ironically, it seems like the issue is even worse now. I can't get my react-bootstrap exports to work at all now. Even after clearing cache, the issue persists. |
Since I seem to be able to replicate this with 100% consistency now, I've configured the Conreq repo in a way that you can test this out on your side. Steps
|
Closing this in favor of #786 |
Current Situation
This error periodically shows client side and will completely break IDOM, but seems to fix itself if clearing browser cache. Something notable is I have never seen this issue when Django-IDOM was using
idom==0.33.0
, but that may just be coincidence.This is the exception stack shown in browser console.
Proposed Actions
Determine root cause and develop a solution.
I seem to be semi-frequently able to reproduce this if leaving my webserver running
django-idom
up while putting my Windows 10 machine to sleep for >12 hours.See #610 for the original discussion.
Work Items
See above.
The text was updated successfully, but these errors were encountered: