Module not found: Can't resolve '@material-ui/styles' (React)

Question

My dependencies

"dependencies": {
    "@craco/craco": "^6.4.0",
    "@emotion/core": "^10.1.1",
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@material-ui/core": "^5.0.0-beta.5",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@material-ui/icons": "^4.11.2",
    "@mui/icons-material": "^5.0.5",
    "@mui/material": "^5.0.6",
    "@mui/x-data-grid": "^5.0.0-beta.7",
    "@mui/x-data-grid-generator": "^4.0.2",
    "@mui/x-data-grid-pro": "^4.0.2",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "autoprefixer": "^9",
    "material-ui": "^1.0.0-beta.47",
    "postcss": "^7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
    "web-vitals": "^1.0.1"
  }

I can't use DataGridPro but I can use DataGrid

The error is

./node_modules/@mui/x-data-grid-pro/dist/index-esm.js Module not found: Can't resolve '@material-ui/styles'

How to fix it ?

Answer 1

You're using the v4 DataGridPro :

"@mui/x-data-grid-pro": "^4.0.2",

Try upgrading the package to v5 so it doesn't depend on the legacy package @material-ui/styles anymore:

npm i x-data-grid-pro@next