React, react-router useHistory. Uncaught Error: Invalid hook call

user_12357289 0
Viewed 1123

I only have one copy of React, checked it with npm ls react, react and react-dom are the same version and I'm not breaking any of the hook rules right? I don't know what to do any more.

ERROR: 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

My component:

import React from "react";
import { useHistory } from "react-router-dom";

export default function HomeButton() {
    let history = useHistory();

    function handleClick() {
     history.push("/home");
    }

    return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
    );
}

package.json

"dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "styled-components": "^5.1.1"
},
react-router react-hooks reactjs
1 Answers

Solved it, added in webpack.config.js under resolve the following:

 alias: {
        react: path.resolve("./node_modules/react"),
        }

I use create-react-app, so I had to run npm run eject, which is not recommended. Anyone got a better idé for the future?

user_123572890
Related