Invalid Hook Call
SaadBazaz opened this issue · 2 comments
SaadBazaz commented
Hey,
This error has been happening for quite a while whenever I install this lib in my new projects. Which prevents me from using it to begin with and to look for alts.
This issue has also been referenced in #64
It also happens in NextJS projects.
index.js:1 Warning: 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.
console.<computed> @ index.js:1
printWarning @ react.development.js:209
error @ react.development.js:183
resolveDispatcher @ react.development.js:1592
useState @ react.development.js:1621
Rater @ index.js:75
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
beginWork$1 @ react-dom.development.js:23940
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
enqueueSetState @ react-dom.development.js:12467
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365
(anonymous) @ Router.js:49
listener @ history.js:155
(anonymous) @ history.js:173
notifyListeners @ history.js:172
setState @ history.js:803
(anonymous) @ history.js:833
confirmTransitionTo @ history.js:145
push @ history.js:821
(anonymous) @ App.js:101
emit @ events.js:157
(anonymous) @ index.js:43
emit @ events.js:153
setLocalState @ connection.js:330
(anonymous) @ connection.js:202
Show 6 more frames
index.js:1 Warning: 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.
Followed by:
react.development.js:1622 Uncaught TypeError: Cannot read properties of null (reading 'useState')
at useState (react.development.js:1622:1)
at Rater (index.js:75:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at react-dom.development.js:11327:1
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
at flushSyncCallbackQueue (react-dom.development.js:11309:1)
at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
at Object.enqueueSetState (react-dom.development.js:12467:1)
at push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365:1)
at Router.js:49:1
at listener (history.js:155:1)
at history.js:173:1
at Array.forEach (<anonymous>)
at Object.notifyListeners (history.js:172:1)
at setState (history.js:803:1)
at history.js:833:1
at Object.confirmTransitionTo (history.js:145:1)
at Object.push (history.js:821:1)
at Multiplayer.<anonymous> (App.js:101:1)
at Multiplayer.emit (events.js:157:1)
at Connection.<anonymous> (index.js:43:1)
at Connection.emit (events.js:153:1)
at Connection.setLocalState (connection.js:330:1)
at WebSocket.<anonymous> (connection.js:202:1)
useState @ react.development.js:1622
Rater @ index.js:75
renderWithHooks @ react-dom.development.js:14985
mountIndeterminateComponent @ react-dom.development.js:17811
beginWork @ react-dom.development.js:19049
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23964
performUnitOfWork @ react-dom.development.js:22776
workLoopSync @ react-dom.development.js:22707
renderRootSync @ react-dom.development.js:22670
performSyncWorkOnRoot @ react-dom.development.js:22293
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
enqueueSetState @ react-dom.development.js:12467
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365
(anonymous) @ Router.js:49
listener @ history.js:155
(anonymous) @ history.js:173
notifyListeners @ history.js:172
setState @ history.js:803
(anonymous) @ history.js:833
confirmTransitionTo @ history.js:145
push @ history.js:821
(anonymous) @ App.js:101
emit @ events.js:157
(anonymous) @ index.js:43
emit @ events.js:153
setLocalState @ connection.js:330
(anonymous) @ connection.js:202
Show 5 more frames
index.js:1 The above error occurred in the <Rater> component:
at Rater (http://localhost:3000/static/js/vendors~main.chunk.js:290947:21)
at RateGame
at GamePage (http://localhost:3000/static/js/main.chunk.js:21278:91)
at div
at MotionComponent (http://localhost:3000/static/js/vendors~main.chunk.js:35206:76)
at MotionWrap (http://localhost:3000/static/js/main.chunk.js:1429:21)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:295995:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:296197:29)
at PresenceChild (http://localhost:3000/static/js/vendors~main.chunk.js:30442:21)
at AnimatePresence (http://localhost:3000/static/js/vendors~main.chunk.js:30621:21)
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:295995:29)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:295614:30)
at div
at App (http://localhost:3000/static/js/main.chunk.js:1030:101)
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.
My env
"react": "^17.0.2",
"react-code-input": "^3.10.1",
"react-collapsible": "^2.10.0",
"react-cropper": "^2.1.7",
"react-dnd": "^14.0.2",
"react-dnd-html5-backend": "^14.0.0",
"react-dnd-touch-backend": "^14.1.0",
"react-dom": "^17.0.2",
"react-portal": "^4.2.1",
"react-qr-code": "^2.0.7",
"react-rater": "^6.0.1",
"react-router-dom": "^5.1.2",
"react-scripts": "4.0.3",
NdYAG commented
@SaadBazaz Previous versions have introduced a dependencies issue which might install two versions of React in the project. Please try installing react-rater@6.0.5, this issue should be resolved now.
NdYAG commented
I'll close this issue, feel free to re-open it if it still exists.