Repository: material-ui
Issue: [system] Import error when using Material UI styles with Remix v2
Labels: bug 🐛,on hold,package: system

Hello, I'm upgrading my remix application from version 1 to version 2 and I am getting this error:
```
[info] building...
[info] built (14.8s)
node:internal/process/esm_loader:40
      internalBinding('errors').triggerUncaughtException(
                                ^

Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/app/node_modules/@mui/material/styles' is not supported resolving ES modules imported from /app/build/index.js
Did you mean to import @mui/material/node/styles/index.js?
    at new NodeError (node:internal/errors:405:5)
    at finalizeResolution (node:internal/modules/esm/resolve:321:11)
    at moduleResolve (node:internal/modules/esm/resolve:980:10)
    at defaultResolve (node:internal/modules/esm/resolve:1193:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:76:39)
    at link (node:internal/modules/esm/module_job:75:36) {
  url: 'file:///app/node_modules/@mui/material/styles',
  code: 'ERR_UNSUPPORTED_DIR_IMPORT'
}

Node.js v18.20.3
```

I haven't found any possible solution. What should I do?

This is my `package.json` file:
```
{
  "name": "my-app",
  "private": true,
  "description": "",
  "license": "",
  "type": "module",
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev -c 'node ./server.js'",
    "devnextweb": "remix dev -c 'cross-env NODE_ENV=nextweb node ./server.js'",
    "start": "remix build && cross-env NODE_ENV=production node ./server.js"
  },
  "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@faker-js/faker": "^8.0.2",
    "@fortawesome/fontawesome-svg-core": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/react": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@mui/icons-material": "^5.15.19",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.19",
    "@mui/styles": "^5.15.19",
    "@mui/x-date-pickers": "^7.6.1",
    "@remix-run/node": "^2.9.2",
    "@remix-run/react": "^2.9.2",
    "@remix-run/serve": "^2.9.2",
    "bcryptjs": "^2.4.3",
    "chart.js": "^4.3.0",
    "compression": "^1.7.4",
    "cross-env": "^7.0.3",
    "date-fns": "^2.29.3",
    "dayjs": "^1.11.5",
    "express": "^4.18.1",
    "i18next": "^22.5.0",
    "i18next-browser-languagedetector": "^7.0.2",
    "i18next-fs-backend": "^2.1.2",
    "i18next-http-backend": "^2.2.1",
    "morgan": "^1.10.0",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.2.0",
    "react-dom": "^18.2.0",
    "react-dropzone": "^14.2.3",
    "react-i18next": "^13.2.0",
    "react-swipeable-views": "^0.14.0",
    "remix-i18next": "^5.1.1",
    "remix-utils": "^7.6.0",
    "sweetalert2": "^11.7.1",
    "uuid": "^8.3.2",
    "validator": "^13.7.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.9.2",
    "@remix-run/eslint-config": "^2.9.2",
    "@types/bcryptjs": "^2.4.2",
    "@types/react": "^18.2.20",
    "@types/react-dom": "^18.2.7",
    "eslint": "^8.15.0",
    "nodemon": "^2.0.20",
    "npm-run-all": "^4.1.5",
    "typescript": "^4.6.4"
  },
  "engines": {
    "node": ">=18"
  }
}
```

**Search keywords**: