Netlify Build Crashing On Installing Material UI - reactjs

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/core#4.12.4
12:16:04 PM: npm ERR! Found: react#18.2.0
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/react#11.10.5
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/styled#11.10.5
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/core#4.12.4
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: react#17.0.2
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/core#4.12.4
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```

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

Related

React Project build fails on Aws amplify while updated from React v16 to v18

I have recently updated my react project from React v16 to v18. It builds on my local machine using npm run build. But after deploying in Aws Amplify to build it gives error! Throwing whole log below. Is it something from npm error or While resolving: #material-ui/core#4.12.4 on the log showed so?
2022-12-14T10:37:14.709Z [INFO]: # Executing command: npm install
2022-12-14T10:37:19.882Z [WARNING]: npm ERR! code
2022-12-14T10:37:19.884Z [WARNING]: ERESOLVE
2022-12-14T10:37:19.904Z [WARNING]: npm
2022-12-14T10:37:19.904Z [WARNING]: ERR! ERESOLVE could not resolve
npm ERR!
npm ERR!
2022-12-14T10:37:19.904Z [WARNING]: While resolving: #material-ui/core#4.12.4
npm ERR! Found: react#18.2.0
npm ERR! node_modules/react
npm ERR! react#"^18.2.0" from the root project
2022-12-14T10:37:19.904Z [WARNING]: npm ERR! peerOptional react#"^16.8.0 || ^17.0.0 ||
^18.0.0" from #apollo/client#3.7.2
npm ERR! node_modules/#apollo/client
npm ERR! #apollo/client#"^3.3.14" from the root
project
npm ERR! #apollo/client#"latest" from #apollo/react-
components#4.0.0
npm ERR! node_modules/#apollo/react-components
npm ERR! #apollo/react-components#"^4.0.0-beta.2"
from the root project
npm ERR! 33 more (#aws-amplify/ui-react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-
ui/core#4.12.4
2022-12-14T10:37:19.905Z [WARNING]: npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.3" from the root
project
npm ERR!
npm ERR! Conflicting peer dependency: react#17.0.2
npm ERR! node_modules/react
npm ERR! peer react#"^16.8.0 || ^17.0.0" from
#material-ui/core#4.12.4
npm ERR! node_modules/#material-ui/core
npm ERR! #material-ui/core#"^4.11.3" from the root
project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-
deps
npm
2022-12-14T10:37:19.905Z [WARNING]: ERR! to accept an incorrect (and potentially broken)
dependency resolution.
npm ERR!
npm ERR! See /root/.npm/eresolve-report.txt for a full
report.
2022-12-14T10:37:19.906Z [WARNING]:
2022-12-14T10:37:19.906Z [WARNING]: npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2022-12-14T10_37_14_924Z-
debug-0.log
2022-12-14T10:37:19.918Z [ERROR]: !!! Build failed
2022-12-14T10:37:19.918Z [ERROR]: !!! Non-Zero Exit Code detected
2022-12-14T10:37:19.918Z [INFO]: # Starting environment caching...
2022-12-14T10:37:19.918Z [INFO]: # Uploading environment cache artifact...
2022-12-14T10:37:20.001Z [INFO]: # Uploaded environment cache artifact
2022-12-14T10:37:20.001Z [INFO]: # Environment caching completed
Terminating logging...
Can anyone help me out? Thanks in advance.
If you use React 18, you should use it with #mui/material v5 instead of #material-ui/core.
https://mui.com/material-ui/getting-started/overview/

Netlify deployment not working giving this error regarding dependencies , I have used Material UI and React Js for this project

2:33:20 PM: npm ERR! Found: react#18.2.0
2:33:20 PM: npm ERR! node_modules/react
2:33:20 PM: npm ERR! react#"^18.2.0" from the root project
2:33:20 PM: npm ERR! peer react#"^18.0.0" from #testing-library/react#13.3.0
2:33:20 PM: npm ERR! node_modules/#testing-library/react
2:33:20 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
2:33:20 PM: npm ERR! #testing-library/react#"^13.3.0" from the root project
2:33:20 PM: npm ERR! 3 more (react-dom, react-scripts, react-transition-group)
2:33:20 PM: npm ERR!
2:33:20 PM: npm ERR! Could not resolve dependency:
2:33:20 PM: npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.4
2:33:20 PM: npm ERR! node_modules/#material-ui/core
2:33:20 PM: npm ERR! #material-ui/core#"^4.12.4" from the root project
2:33:20 PM: npm ERR! peer #material-ui/core#"^4.0.0" from #material-ui/icons#4.11.3
2:33:20 PM: npm ERR! node_modules/#material-ui/icons
2:33:20 PM: npm ERR! #material-ui/icons#"^4.11.3" from the root project
2:33:20 PM: npm ERR! 1 more (#material-ui/lab)
2:33:20 PM: npm ERR!
2:33:20 PM: npm ERR! Conflicting peer dependency: react#17.0.2
2:33:20 PM: npm ERR! node_modules/react
2:33:20 PM: npm ERR! peer react#"^16.8.0 || ^17.0.0" from #material-ui/core#4.12.4
2:33:20 PM: npm ERR! node_modules/#material-ui/core
2:33:20 PM: npm ERR! #material-ui/core#"^4.12.4" from the root project
2:33:20 PM: npm ERR! peer #material-ui/core#"^4.0.0" from #material-ui/icons#4.11.3
2:33:20 PM: npm ERR! node_modules/#material-ui/icons
2:33:20 PM: npm ERR! #material-ui/icons#"^4.11.3" from the root project
2:33:20 PM: npm ERR! 1 more (#material-ui/lab)
2:33:20 PM: npm ERR!
2:33:20 PM: npm ERR! Fix the upstream dependency conflict, or retry
2:33:20 PM: npm ERR! this command with --force, or --legacy-peer-deps
2:33:20 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
2:33:20 PM: npm ERR!
2:33:20 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
2:33:20 PM: npm ERR! A complete log of this run can be found in:
2:33:20 PM: npm ERR! /opt/buildhome/.npm/_logs/2022-08-01T09_03_18_638Z-debug-0.log
2:33:20 PM: Error during NPM install
2:33:20 PM: Build was terminated: Build script returned non-zero exit code: 1
2:33:20 PM: Failing build: Failed to build site
2:33:20 PM: Finished processing build request in 8.05661984s

react-google-login npm package error in version of react#"^18.2.0" from the root project

I'm getting error in react-google-login npm package here i've shown build code
10:50:18 AM: Build ready to start
10:50:21 AM: build-image version: 72a309a113b53ef075815b129953617827965e48 (focal)
10:50:21 AM: build-image tag: v4.8.2
10:50:21 AM: buildbot version: 515e5c33287d8b909c004fcf2e460e8645e8c1c6
10:50:21 AM: Fetching cached dependencies
10:50:21 AM: Failed to fetch cache, continuing with build
10:50:21 AM: Starting to prepare the repo for build
10:50:21 AM: No cached dependencies found. Cloning fresh repo
10:50:21 AM: git clone https://github.com/abhidadhaniya23/xlinks-client
10:50:22 AM: Preparing Git Reference refs/heads/master
10:50:22 AM: Parsing package.json dependencies
10:50:23 AM: Starting build script
10:50:23 AM: Installing dependencies
10:50:23 AM: Python version set to 2.7
10:50:24 AM: v16.15.1 is already installed.
10:50:25 AM: Now using node v16.15.1 (npm v8.11.0)
10:50:25 AM: Started restoring cached build plugins
10:50:25 AM: Finished restoring cached build plugins
10:50:25 AM: Attempting ruby version 2.7.2, read from environment
10:50:26 AM: Using ruby version 2.7.2
10:50:26 AM: Using PHP version 8.0
10:50:27 AM: No npm workspaces detected
10:50:27 AM: Started restoring cached node modules
10:50:27 AM: Finished restoring cached node modules
10:50:27 AM: Installing NPM modules using NPM version 8.11.0
10:50:27 AM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
10:50:27 AM: npm WARN config location in the cache, and they are managed by
10:50:27 AM: npm WARN config [`cacache`](http://npm.im/cacache).
10:50:28 AM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
10:50:28 AM: npm WARN config location in the cache, and they are managed by
10:50:28 AM: npm WARN config [`cacache`](http://npm.im/cacache).
10:50:30 AM: npm ERR! code ERESOLVE
10:50:30 AM: npm ERR! ERESOLVE could not resolve
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! While resolving: react-google-login#5.2.2
10:50:30 AM: Creating deploy upload records
10:50:30 AM: npm ERR! Found: react#18.2.0
10:50:30 AM: npm ERR! node_modules/react
10:50:30 AM: npm ERR! react#"^18.2.0" from the root project
10:50:30 AM: npm ERR! peer react#"^18.0.0" from #testing-library/react#13.3.0
10:50:30 AM: npm ERR! node_modules/#testing-library/react
10:50:30 AM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
10:50:30 AM: npm ERR! #testing-library/react#"^13.3.0" from the root project
10:50:30 AM: npm ERR! 2 more (react-dom, react-scripts)
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! Could not resolve dependency:
10:50:30 AM: npm ERR! peer react#"^16 || ^17" from react-google-login#5.2.2
10:50:30 AM: npm ERR! node_modules/react-google-login
10:50:30 AM: npm ERR! react-google-login#"^5.2.2" from the root project
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! Conflicting peer dependency: react#17.0.2
10:50:30 AM: npm ERR! node_modules/react
10:50:30 AM: npm ERR! peer react#"^16 || ^17" from react-google-login#5.2.2
10:50:30 AM: npm ERR! node_modules/react-google-login
10:50:30 AM: npm ERR! react-google-login#"^5.2.2" from the root project
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! Fix the upstream dependency conflict, or retry
10:50:30 AM: npm ERR! this command with --force, or --legacy-peer-deps
10:50:30 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
10:50:30 AM: npm ERR!
10:50:30 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
10:50:30 AM: npm ERR! A complete log of this run can be found in:
10:50:30 AM: npm ERR! /opt/buildhome/.npm/_logs/2022-07-01T05_20_28_238Z-debug-0.log
10:50:30 AM: Error during NPM install
10:50:30 AM: Build was terminated: Build script returned non-zero exit code: 1
10:50:30 AM: Failing build: Failed to build site
10:50:30 AM: Finished processing build request in 9.18683257s
I've also tried npm install react-google-login --legacy-peer-deps command to install react-google-login but still build failed in netlify building process.
This log, I've atteched from netlify build.
When I install packages using npm install it shows 6 high severity vulnerabilities

React app deployment error Error during NPM install

This is the error:
12:28:55 PM: Installing NPM modules using NPM version 8.11.0
12:28:56 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
12:28:56 PM: npm WARN config location in the cache, and they are managed by
12:28:56 PM: npm WARN config [`cacache`](http://npm.im/cacache).
12:28:56 PM: npm WARN config tmp This setting is no longer used. npm stores temporary files in a special
12:28:56 PM: npm WARN config location in the cache, and they are managed by
12:28:56 PM: npm WARN config [`cacache`](http://npm.im/cacache).
12:28:57 PM: npm ERR! code ERESOLVE
12:28:57 PM: npm ERR! ERESOLVE could not resolve
12:28:57 PM: npm ERR!
12:28:57 PM: npm ERR! While resolving: react-alert#7.0.3
12:28:58 PM: Creating deploy upload records
12:28:57 PM: npm ERR! Found: react#18.2.0
12:28:57 PM: npm ERR! node_modules/react
12:28:57 PM: npm ERR! react#"^18.2.0" from the root project
12:28:57 PM: npm ERR! peer react#"^18.0.0" from #testing-library/react#13.0.1
12:28:57 PM: npm ERR! node_modules/#testing-library/react
12:28:58 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
12:28:57 PM: npm ERR! #testing-library/react#"^13.0.1" from the root project
12:28:57 PM: npm ERR! 5 more (react-dom, react-router, react-router-dom, ...)
12:28:57 PM: npm ERR!
12:28:57 PM: npm ERR! Could not resolve dependency:
12:28:57 PM: npm ERR! peer react#"^16.8.1 || ^17" from react-alert#7.0.3
12:28:57 PM: npm ERR! node_modules/react-alert
12:28:57 PM: npm ERR! react-alert#"^7.0.3" from the root project
12:28:57 PM: npm ERR!
12:28:57 PM: npm ERR! Conflicting peer dependency: react#17.0.2
12:28:57 PM: npm ERR! node_modules/react
12:28:57 PM: npm ERR! peer react#"^16.8.1 || ^17" from react-alert#7.0.3
12:28:57 PM: npm ERR! node_modules/react-alert
12:28:57 PM: npm ERR! react-alert#"^7.0.3" from the root project
12:28:57 PM: npm ERR!
12:28:57 PM: npm ERR! Fix the upstream dependency conflict, or retry
12:28:57 PM: npm ERR! this command with --force, or --legacy-peer-deps
12:28:57 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
12:28:57 PM: npm ERR!
12:28:57 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
12:28:57 PM: npm ERR! A complete log of this run can be found in:
12:28:57 PM: npm ERR! /opt/buildhome/.npm/_logs/2022-06-25T06_58_56_560Z-debug-0.log
12:28:57 PM: Error during NPM install
12:28:57 PM: Build was terminated: Build script returned non-zero exit code: 1
12:28:58 PM: Failing build: Failed to build site
12:28:58 PM: Finished processing build request in 8.110559255s
I trying to debugging it by Updating node modules but the error can't be solved
This problem is happening due to the version conflicts. So try the below command to install all dependencies properly,
npm install --legacy-peer-deps
It means that your React version (18) is not compatible with react-alert React version (16.8.1 or 17). https://www.npmjs.com/package/react-alert#user-content-peer-dependencies
So my propose is: If this package is necessary, so I recommend to downgrade your React version to 17 or 16.8.1 and test it in your local environment, before deploy. If this does not work, so remove your node_modules folder and install all packages again.

How to resolve npm ERR! ERESOLVE unable to resolve dependency tree - simple react lightbox?

I'm trying to resolve an error with my Gatsby project.
I got the following error when I run npm update in my CLI:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! node_modules/react
npm ERR! react#"^18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"^17.0.2" from simple-react-lightbox#3.6.9-0
npm ERR! node_modules/simple-react-lightbox
npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
When I build (gatsby build) the website via the CLI it works, but when I deploy it to Netlify I get the same error:
4:05:39 PM: npm ERR! code ERESOLVE
4:05:39 PM: npm ERR! ERESOLVE could not resolve
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! While resolving: simple-react-lightbox#3.6.9-0
4:05:39 PM: Creating deploy upload records
4:05:39 PM: npm ERR! Found: react#18.1.0
4:05:39 PM: npm ERR! node_modules/react
4:05:39 PM: npm ERR! react#"^18.1.0" from the root project
4:05:39 PM: npm ERR! peer react#">=16.8 || ^17.0.0" from framer-motion#4.1.17
4:05:39 PM: npm ERR! node_modules/framer-motion
4:05:39 PM: npm ERR! framer-motion#"^4.1.17" from simple-react-lightbox#3.6.9-0
4:05:39 PM: npm ERR! node_modules/simple-react-lightbox
4:05:40 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
4:05:39 PM: npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
4:05:39 PM: npm ERR! 15 more (nano-css, react-dom, react-helmet, react-masonry-css, ...)
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! Could not resolve dependency:
4:05:39 PM: npm ERR! peer react#"^17.0.2" from simple-react-lightbox#3.6.9-0
4:05:39 PM: npm ERR! node_modules/simple-react-lightbox
4:05:39 PM: npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! Conflicting peer dependency: react#17.0.2
4:05:39 PM: npm ERR! node_modules/react
4:05:39 PM: npm ERR! peer react#"^17.0.2" from simple-react-lightbox#3.6.9-0
4:05:39 PM: npm ERR! node_modules/simple-react-lightbox
4:05:39 PM: npm ERR! simple-react-lightbox#"^3.6.9-0" from the root project
4:05:39 PM: npm ERR!
4:05:39 PM: npm ERR! Fix the upstream dependency conflict, or retry
4:05:39 PM: npm ERR! this command with --force, or --legacy-peer-deps
4:05:39 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Any ideas on how to resolve this?
I faced similar problem some minutes ago, but I was able to solve it by forcefully installing it using the --force flag, so you'd install it by:
npm install --force simple-react-lightbox
What I believe the problem is, is that the dependency/package you want to install is built upon react v17.x and you're working with a project on react v18.x
I hope this solves your problem.
I see that the package has been deprecated. It's no longer been supported since a short time ago. I've downgraded react from 17 to 18. That seems to work.
https://www.npmjs.com/package/simple-react-lightbox
My steps:
downgraded react 18 to 17
(npm install --save react#17.0.2 react-dom#17.0.2)
Deleted Gatsby cache
gatsby clean
Deleted node_modules and package-lock.json
Reinstalled npm
npm install

Resources