当我尝试运行我的 React 应用程序时，我收到错误消息：“Invalid hook call”。 不明白为什么

Question

I get the error message: Invalid hook call. Hooks can only be called inside of the body of a function component Invalid hook call. Hooks can only be called inside of the body of a function component when I try to run my react app.

 import React from "react"; import BarChart from "../components/BarChart"; import LineChart from "../components/LineChart"; import Navbar from "../components/Navbar"; import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles({ row: { display: "flex", flexDirection: "row" } }); const Index = () => { const classes = useStyles(); return ( <div> <Navbar /> <div className={classes.row}> <BarChart /> <LineChart /> </div> </div> ); }; export default Index;

It fails in line 16 ( const classes = useStyles(); ).

The Navbar, BarChart and LinChart components is just components that I have created and it doesn't seem like the code breaks in these components. I'm able to run my code without any error messages if iI remove line 16.

Any ideas what might help?

Answer 1

I tried makeStyles locally and it worked perfectly fine. Kindly check your dependencies and update them to latest then try again. I'm currently having: "react": "^16.8.2", "react-dom": "^16.8.2", "@material-ui/core": "^4.9.12"