Invalid hook call on react 17

[damdinsharav]

Hi, I'm getting following error in React 17. What could be the issue? Maybe incompatibility. I am getting started with React and have no clue.

Uncaught Error: Invalid hook call. ...

...
The above error occured in the <Radar> component:
at Radar(http://localhost:3000/static/js/0.chunk.js:63974:21)
at div
at Techradar
at App

index.js

import React from 'react;
import ReactDOM from 'react-dom';
import TechRadar from "./TechRadar";

const App = () => {
   return <TechRadar />;
};

ReactDOM.render(<App />, document.querySelector(#root));

TechRadar.js

import React from 'react';
import Radar from 'react-tech-radar';

const TechRadar = ()=> {

    const setup = {
        rings: ['adopt', 'trial', 'assess', 'hold'],
        quadrants: ['tools', 'techniques', 'platforms', 'languages'],
        data: [
            {
                name: 'D3',
                quadrant: 'tools',
                ring: "assess"

            },
            {
                name: 'TypeScript',
                quadrant: 'languages',
                ring: "trial"
            },
            {
                name: 'Storybook',
                quadrant: 'tools',
                ring: "adopt"
            }
        ]
    };

    return (
        <div className="TechRadar">
            <Radar {...setup} />
        </div>
    );
}

export default TechRadar;

[antongitnow]

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

[omerg]

Hi @antongitnow ,

That must be due to the fact that there are two versions of react or react-dom in your runtime environment. I notice that we need to remove react and react-dom from dependencies field inside package.json because they are already added to peer-dependencies. Please feel free to make the change.

[onikiienko]

You can use yarn resolutions to fix this problem, if you're using npm, you can check npm-force-resolutions. You just have to specify your react and react-dom versions like this

{
...
  "resolutions": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
...
}

[TotomiEcio]

Hi ! I'm using this versions of react and react-dom and I'm still getting the same error

"react": "^18.2.0",
"react-dom": "^18.2.0",

Uncaught 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 (react.development.js:1280:1)
    at useContext (react.development.js:1286:1)
    at Radar (Radar.js:57:1)
    at renderWithHooks (react-dom.development.js:14141:1)
    at mountIndeterminateComponent (react-dom.development.js:17432:1)
    at beginWork (react-dom.development.js:18728:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3733:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3777:1)
    at invokeGuardedCallback (react-dom.development.js:3834:1)
    at beginWork$1 (react-dom.development.js:23713:1)

Thanks

[omerg]

Should be fixed now 👀