Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React 17 - Error: Invalid hook call

See original GitHub issue

Error: 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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.



 at resolveDispatcher (/Users/username/Desktop/code/apps/app/app.app/node_modules/react-glider/node_modules/react/cjs/react.development.js:1465:13)
    at Object.useRef (/Users/username/Desktop/code/apps/app/app.app/node_modules/react-glider/node_modules/react/cjs/react.development.js:1504:20)
    at Object.render (/Users/username/Desktop/code/apps/app/app.app/node_modules/react-glider/dist/index.js:38:26)
    at ReactDOMServerRenderer.render (/Users/username/Desktop/code/apps/app/app.app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3872:44)
    at ReactDOMServerRenderer.read (/Users/username/Desktop/code/apps/app/app.app/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at renderToString (/Users/username/Desktop/code/apps/app/app.app/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/next-server/server/render.js:54:854)
    at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:211:19)
    at loadGetInitialProps (/Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/next-server/lib/utils.js:5:101)
    at renderToHTML (/Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/next-server/server/render.js:54:1145)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async /Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/next-server/server/next-server.js:112:97
    at async __wrapper (/Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/lib/coalesced-function.js:1:330)
    at async DevServer.renderToHTMLWithComponents (/Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/next-server/server/next-server.js:137:387)
    at async DevServer.renderToHTML (/Users/username/Desktop/code/apps/app/app.app/node_modules/next/dist/next-server/server/next-server.js:138:1088)

Issue Analytics

State:
Created 2 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

srameshrcommented, Sep 2, 2021

Its with the React version mismatch in @reach/auto-id and this package. If I got to node_moduels/react-glider folder and delete the react and react-dom package it works just fine. Could you please fix it?

0reactions

kevinfarrugiacommented, Nov 13, 2021

I created a PR for this but was unable to reproduce the error.

https://github.com/hipstersmoothie/react-glider/pull/83