MaterialUI - 'StylesProvider' cannot be used as a JSX component

Question

I have an app written in React with TypeScript and lately after refreshing node modules and the lockfile I am getting this error when trying to run the app:

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>

The weird thing is it was working correctly but it just stopped working now. The App.ts is here in a reduced version just to show more or less what it looks like:

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;

Answer 1

About your question, I think you can try to change the StylesProvider import path like this:

import { StylesProvider } from '@material-ui/styles';

You could try this and let me know is work or not.

Answer 2

If you are using MUI v4, you can follow this documentation

https://v4.mui.com/styles/api/#stylesprovider

If you are migrating from v4 to v5, this documentation can help you

https://mui.com/material-ui/guides/migration-v4/#mui-material-styles

Make sure your MUI version first with this command

npm list @material-ui/core

npm list @material-ui/styles

I hope it gives you hint to solve your issue.