Module not found: Can't resolve '@material-ui/core' in '/app/node_modules/@material-ui/lab/esm/AlertTitle'

[ImCityHunter]

Running our web project (using material ui) on localhost is perfectly fine. However, it became an issue when I tried to launch it on Heroku. It shows

Module not found: Can't resolve '@material-ui/core' in '/app/node_modules/@material-ui/lab/esm/AlertTitle'

I have tried to install the latest Material Ui core/lab.

Here is the info for dependencies "devDependencies": { "@material-ui/core": "^4.9.11", "@material-ui/icons": "^4.9.1", "dateformat": "^3.0.3", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-thunk": "^2.3.0" }

"dependencies": { "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", "bootstrap": "^4.4.1", "react": "^16.13.0", "react-autocomplete": "^1.8.1", "react-bootstrap": "^1.0.0", "react-dom": "^16.13.0", "react-redux": "^7.2.0", "react-router-dom": "^5.1.2", "react-scripts": "3.4.0", "redux": "^4.0.5" },

• [ YES] The issue is present in the latest release.
• [ YES] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Running the program locally has been perfectly fine; and pushing to heroku shows build succuess. But when I check the project web, it shows

Failed to compile ./node_modules/@material-ui/lab/esm/AlertTitle/AlertTitle.js Module not found: Can't resolve '@material-ui/core' in '/app/node_modules/@material-ui/lab/esm/AlertTitle'

Here is an image when I type 'heroku logs' in my terminal

I have also tried to use import Alert from '@material-ui/lab/Alert'; or import { Alert } from '@material-ui/lab'; in my component. Both works fine when web is running locally, but it became an issue when trying to launch on heroku.

[eps1lon]

You have dependencies and devDependencies mixed up. Heroku probably only installs production dependencies (not devDependencies).

If the issue persist, please open an issue with heroku. We don't have the bandwidth to debug every environment.

[ImCityHunter]

@eps1lon , the issue has been resolved. It is indeed what you said. I just had to copy all the information from devDependencies to dependencies. Thank you.

[rizwan-bashir]

Error ./node_modules/@material-ui/lab/esm/AlertTitle/AlertTitle.js Module not found: Can't resolve '@material-ui/core' in 'F:\GitHub\Reactwebsite\react-2\node_modules\@material-ui\lab\esm\AlertTitle'

json { "name": "react-2", "version": "0.1.0", "private": true, "proxy": "http://127.0.0.1:8000", "dependencies": { "@amcharts/amcharts4": "^4.10.17", "@amcharts/amcharts4-fonts": "^4.0.1", "@amcharts/amcharts4-geodata": "^4.1.19", "@material-ui/core": "^4.12.1", "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.60", "@testing-library/jest-dom": "^5.11.9", "@testing-library/react": "^11.2.5", "@testing-library/user-event": "^12.7.1", "apexcharts": "^3.26.3", "axios": "^0.21.1", "bootstrap": "^5.0.1", "chart.js": "^2.9.4", "classnames": "^2.2.6", "d3": "^6.6.0", "formik": "^2.2.9", "google-map-react": "^2.1.10", "google-maps-react": "^2.0.6", "leaflet": "^1.7.1", "react": "^17.0.1", "react-bootstrap-validation": "^0.1.11", "react-chartjs-2": "^2.11.2", "react-countup": "^4.3.3", "react-dom": "^17.0.1", "react-google-maps": "^9.4.5", "react-html-parser": "^2.0.2", "react-icons": "^4.2.0", "react-leaflet": "^3.1.0", "react-redux": "^7.2.4", "react-router-dom": "^5.2.0", "react-scripts": "^4.0.3", "react-spinners": "^0.10.6", "react-toastify": "^7.0.4", "react-use": "^17.2.3", "recharts": "^2.0.9", "util": "^0.11.1", "web-vitals": "^1.1.0", "yup": "^0.32.9" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }

Any solution...????