Implementing a simple carousel using react material-ui carousel the Invalid hook call error rises.
Error occurred:
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.
I simplified the documentation starter code as much as I could, but the error still remains. Seems the dependency packages version looks correct and error just rise from the code I had no idea how to fix that.
My code: On stackblitz
import * as React from 'react';
import { Paper, Typography, Button } from '@mui/material';
import Carousel from 'react-material-ui-carousel';
const Demo = (props) => (
<Carousel>
{/* Change above line to <> and it work, maybe some version conflicts?? */}
<Paper>
<Typography>First Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Second Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
<Paper>
<Typography>Third Item</Typography>
<Button variant="outlined">Click me please!</Button>
</Paper>
</Carousel>
);
export default Demo;
Looks like they havn't updated the package yet to support react 18 https://github.com/Learus/react-material-ui-carousel/issues/174.
If you're using npm add:
"overrides": {
"react-material-ui-carousel": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}
to package.json. Or if you're using yarn add:
"resolutions": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
I also had to delete both my package-lock.json and node_modules then run npm install
but maybe try without first.