Tengo la siguiente aplicación simple:
import Grid from '@material-ui/core/Grid'; function App() { return ( <div className="App"> <Grid container spacing={2}> <Grid item xs={8}> a </Grid> <Grid item xs={4}> b </Grid> <Grid item xs={4}> c </Grid> <Grid item xs={8}> d </Grid> </Grid> </div> ); } export default App;El código se compila sin errores ni advertencias. Sin embargo, en tiempo de ejecución, arroja esto:
react.development.js:1476 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. at resolveDispatcher (react.development.js:1476) at Object.useContext (react.development.js:1484) at useTheme (useTheme.js:4) at useStyles (makeStyles.js:222) at WithStyles (withStyles.js:55) at renderWithHooks (react-dom.development.js:14985) at updateForwardRef (react-dom.development.js:17044) at beginWork (react-dom.development.js:19098) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) resolveDispatcher @ react.development.js:1476 useContext @ react.development.js:1484 useTheme @ useTheme.js:4 useStyles @ makeStyles.js:222 WithStyles @ withStyles.js:55 renderWithHooks @ react-dom.development.js:14985 updateForwardRef @ react-dom.development.js:17044 beginWork @ react-dom.development.js:19098 callCallback @ react-dom.development.js:3945 invokeGuardedCallbackDev @ react-dom.development.js:3994 invokeGuardedCallback @ react-dom.development.js:4056 beginWork$1 @ react-dom.development.js:23964 performUnitOfWork @ react-dom.development.js:22776 workLoopSync @ react-dom.development.js:22707 renderRootSync @ react-dom.development.js:22670 performSyncWorkOnRoot @ react-dom.development.js:22293 scheduleUpdateOnFiber @ react-dom.development.js:21881 updateContainer @ react-dom.development.js:25482 (anonymous) @ react-dom.development.js:26021 unbatchedUpdates @ react-dom.development.js:22431 legacyRenderSubtreeIntoContainer @ react-dom.development.js:26020 render @ react-dom.development.js:26103 ./src/index.js @ index.js:7¿Estoy haciendo algo mal o hay un error en el último material-ui? He estado buscando en Google durante horas y no encontré ninguna solución a este problema.
Como está utilizando material-ui (V5), primero deberá actualizar los nombres de los paquetes y luego la declaración de importación a esto:
import Grid from '@mui/material/Grid';Para obtener más información, consulte los registros de cambios - Migración de v4 a v5