this is kind of short one , im using React , Material Ui and then i get this error Invalid hook calls
my code :
import React from 'react'
import { Container , Button , Grid , Grow , Typography , AppBar} from '@material-ui/core'
import memories from '../src/Assets/memories.png'
const App = () => {
return (
<Container maxWidth='lg'>
<AppBar position='static' color='inherit'>
<Typography variant='h2' align='center' > Memories OvO </Typography>
<img src={memories} alt='memories' height='60px'/>
</AppBar>
</Container>
)
}
export default App
my index.js:
import ReactDOM from 'react-dom'
import App from './App'
ReactDOM.render(<App/>, document.getElementById('root'))
my dependencies in package.json : "dependencies": { "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", "axios": "^0.21.1", "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-file-base64": "^1.0.3", "react-scripts": "4.0.3", "redux": "^4.1.1", "redux-thunk": "^2.3.0", "web-vitals": "^1.1.2" }, the error is : 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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- 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.
Comments
Post a Comment