Netlify Build Crashing On Installing Material UI

Question

I am trying to deploy my react application on netlify. It is working fine on my desktop and even npm run build is properly working. The material ui packages that I am using are also working fine on my desktop but when I am deploying on netlify the build fails. This is the error log

12:16:02 PM: No npm workspaces detected
12:16:02 PM: Started restoring cached node modules
12:16:02 PM: Finished restoring cached node modules
12:16:02 PM: Installing NPM modules using NPM version 8.19.2
12:16:04 PM: npm ERR! code ERESOLVE
12:16:04 PM: npm ERR! ERESOLVE could not resolve
12:16:04 PM: npm ERR!
12:16:04 PM: Creating deploy upload records
12:16:04 PM: npm ERR! While resolving: @material-ui/[email protected]
12:16:04 PM: npm ERR! Found: [email protected]
12:16:04 PM: npm ERR! node_modules/react
12:16:04 PM: npm ERR!   react@"^18.2.0" from the root project
12:16:04 PM: npm ERR!   peer react@">=16.8.0" from @emotion/[email protected]
12:16:04 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
12:16:04 PM: npm ERR!   node_modules/@emotion/react
12:16:04 PM: npm ERR!     @emotion/react@"^11.10.5" from the root project
12:16:04 PM: npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/[email protected]
12:16:04 PM: npm ERR!     node_modules/@emotion/styled
12:16:04 PM: npm ERR!       @emotion/styled@"^11.10.5" from the root project
12:16:04 PM: npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
12:16:04 PM: npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
12:16:04 PM: npm ERR!   16 more (@emotion/styled, ...)
12:16:04 PM: npm ERR!
12:16:04 PM: npm ERR! Could not resolve dependency:
12:16:04 PM: npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
12:16:04 PM: npm ERR! node_modules/@material-ui/core
12:16:04 PM: npm ERR!   @material-ui/core@"^4.12.4" from the root project
12:16:04 PM: npm ERR!
12:16:04 PM: npm ERR! Conflicting peer dependency: [email protected]
12:16:04 PM: npm ERR! node_modules/react
12:16:04 PM: npm ERR!   peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
12:16:04 PM: npm ERR!   node_modules/@material-ui/core
12:16:04 PM: npm ERR!     @material-ui/core@"^4.12.4" from the root project
12:16:04 PM: npm ERR!
12:16:04 PM: npm ERR! Fix the upstream dependency conflict, or retry
12:16:04 PM: npm ERR! this command with --force, or --legacy-peer-deps
12:16:04 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
12:16:04 PM: npm ERR!
12:16:04 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
12:16:04 PM: npm ERR! A complete log of this run can be found in:
12:16:04 PM: npm ERR!     /opt/buildhome/.npm/_logs/2022-12-04T06_46_03_020Z-debug-0.log
12:16:04 PM: Error during NPM install
12:16:04 PM: Build was terminated: Build script returned non-zero exit code: 1
12:16:04 PM: Failing build: Failed to build site
12:16:04 PM: Finished processing build request in 5.438038347s```

Answer 1

I think this is something related to package versions and there might be some conflict

you are using react 18 but @material-ui/core requires react 16 or 17

so can downgrade your react or upgrade material-ui to version 5

or add --force to ignore the conflict of packages

npm i @material-ui/core --force

Answer 2

Add .lock file to the git repo after doing --force or setting legacy-peer-deps true. If you are using yarn package then add yarn.lock file then trigger deployment in netlify.