Tengo una aplicación escrita en React con TypeScript y, últimamente, después de actualizar los módulos de nodo y el archivo de bloqueo, recibo este error cuando intento ejecutar la aplicación:
TypeScript error in C:/repos/jit/era-frontend/src/App.tsx(23,16): 'StylesProvider' cannot be used as a JSX component. Its element type 'ReactElement<any, any> | Component<StylesProviderProps, any, any> | null' is not a valid JSX element. Type 'Component<StylesProviderProps, any, any>' is not assignable to type 'Element | ElementClass | null'. Type 'Component<StylesProviderProps, any, any>' is not assignable to type 'ElementClass'. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("C:/repos/jit/era-frontend/node_modules/@types/testing-library__react/node_modules/@types/react/index").ReactNode'. Type '{}' is not assignable to type 'ReactNode'. Type '{}' is missing the following properties from type 'ReactPortal': key, children, type, props TS2786 21 | <UserProvider> 22 | <ThemeProvider theme={theme}> > 23 | <StylesProvider injectFirst> | ^ 24 | <GlobalProvider>{routes}</GlobalProvider> 25 | </StylesProvider> 26 | </ThemeProvider>Lo extraño es que funcionaba correctamente, pero ahora dejó de funcionar. El App.ts está aquí en una versión reducida solo para mostrar más o menos cómo se ve:
import React from "react"; import { BrowserRouter as Router } from "react-router-dom"; import DateFnsUtils from "@date-io/date-fns"; import { MuiThemeProvider as ThemeProvider, StylesProvider } from "@material-ui/core/styles"; import { MuiPickersUtilsProvider } from "@material-ui/pickers"; import { GlobalProvider } from "globalContext/GlobalContext"; import routes from "router/routes"; import "moment/locale/en-gb"; import theme from "./themes"; import "./App.css"; function App() { return ( <Router> <MuiPickersUtilsProvider utils={DateFnsUtils}> <ThemeProvider theme={theme}> <StylesProvider injectFirst> <GlobalProvider>{routes}</GlobalProvider> </StylesProvider> </ThemeProvider> </MuiPickersUtilsProvider> </Router> ); } export default App;Acerca de su pregunta, creo que puede intentar cambiar la ruta de importación de StylesProvider de esta manera:
import { StylesProvider } from '@material-ui/styles';Podrías probar esto y decirme si funciona o no.
Si está utilizando MUI v4, puede seguir esta documentación
https://v4.mui.com/styles/api/#stylesprovider
Si está migrando de v4 a v5, esta documentación puede ayudarlo
https://mui.com/material-ui/guides/migration-v4/#mui-material-styles
Asegúrese primero de su versión de MUI con este comando
npm list @material-ui/core npm list @material-ui/stylesEspero que te sirva de pista para solucionar tu problema.