Bunch of NPM ERR's when deploying ReactApp

Support
,
1

Hello! I am working on my first React app and am trying to deploy it through Netlify.

The app link is → https://stellular-paletas-6a1c45.netlify.app

And when I go to deploy, these are the error messages I get:

1:31:40 PM: build-image version: a2d22d22e4555d1ef0a972ed14a0a4b366ad20c4 (focal)
1:31:40 PM: build-image tag: v4.16.3
1:31:40 PM: buildbot version: 211709fe0bb687fe4fe2ebbb0a0d7258aa6e265c
1:31:40 PM: Fetching cached dependencies
1:31:40 PM: Failed to fetch cache, continuing with build
1:31:40 PM: Starting to prepare the repo for build
1:31:40 PM: No cached dependencies found. Cloning fresh repo
1:31:40 PM: git clone --filter=blob:none --no-checkout https://github.com/petermazzocco/lyrical
1:31:40 PM: Preparing Git Reference refs/heads/master
1:31:41 PM: Parsing package.json dependencies
1:31:43 PM: Starting build script
1:31:43 PM: Installing dependencies
1:31:43 PM: Python version set to 2.7
1:31:43 PM: v16.19.0 is already installed.
1:31:44 PM: Now using node v16.19.0 (npm v8.19.3)
1:31:44 PM: Enabling Node.js Corepack
1:31:44 PM: Started restoring cached build plugins
1:31:44 PM: Finished restoring cached build plugins
1:31:44 PM: Attempting Ruby version 2.7.2, read from environment
1:31:45 PM: Using Ruby version 2.7.2
1:31:45 PM: Using PHP version 8.0
1:31:45 PM: Started restoring cached corepack dependencies
1:31:45 PM: mv: cannot move '/opt/build/cache/.node/corepack' to '/opt/buildhome/.node/corepack': No such file or directory
1:31:45 PM: Finished restoring cached corepack dependencies
1:31:45 PM: No npm workspaces detected
1:31:45 PM: Started restoring cached node modules
1:31:45 PM: Finished restoring cached node modules
1:31:45 PM: Bypassing sha validation. Running pre & post install scripts
1:31:45 PM: Installing npm packages using npm version 8.19.3
1:31:47 PM: npm ERR! code ERESOLVE
1:31:47 PM: npm ERR! ERESOLVE could not resolve
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! While resolving: react-google-login@5.2.2
1:31:47 PM: npm ERR! Found: react@18.2.0
1:31:47 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1 (https://ntl.fyi/exit-code-1)
1:31:47 PM: npm ERR! node_modules/react
1:31:47 PM: npm ERR!   react@"^18.2.0" from the root project
1:31:47 PM: npm ERR!   peer react@">=16.8.0" from @emotion/react@11.10.5
1:31:47 PM: npm ERR!   node_modules/@emotion/react
1:31:47 PM: npm ERR!     @emotion/react@"^11.10.5" from the root project
1:31:47 PM: npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/styled@11.10.5
1:31:47 PM: npm ERR!     node_modules/@emotion/styled
1:31:47 PM: npm ERR!       @emotion/styled@"^11.10.5" from the root project
1:31:47 PM: npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
1:31:47 PM: npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
1:31:47 PM: npm ERR!   19 more (@emotion/styled, ...)
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! Could not resolve dependency:
1:31:47 PM: npm ERR! peer react@"^16 || ^17" from react-google-login@5.2.2
1:31:47 PM: npm ERR! node_modules/react-google-login
1:31:47 PM: npm ERR!   react-google-login@"^5.2.2" from the root project
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! Conflicting peer dependency: react@17.0.2
1:31:47 PM: npm ERR! node_modules/react
1:31:47 PM: npm ERR!   peer react@"^16 || ^17" from react-google-login@5.2.2
1:31:47 PM: npm ERR!   node_modules/react-google-login
1:31:47 PM: npm ERR!     react-google-login@"^5.2.2" from the root project
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! Fix the upstream dependency conflict, or retry
1:31:47 PM: npm ERR! this command with --force, or --legacy-peer-deps
1:31:47 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
1:31:47 PM: npm ERR! A complete log of this run can be found in:
1:31:47 PM: npm ERR!     /opt/buildhome/.npm/_logs/2023-01-21T21_31_45_903Z-debug-0.log
1:31:47 PM: Error during npm install
1:31:47 PM: Build was terminated: Build script returned non-zero exit code: 1
1:31:47 PM: Failing build: Failed to build site
1:31:47 PM: Finished processing build request in 7.623s

After doing a couple of searches, the only thing I’ve done so far is: npm install --legacy-peer-deps

I’m assuming this has to do with my dependencies (obviously), but I don’t have a clue on where to start fixing these issues. If anyone can help me out, that would be great!

2

Hi @OhItsPM, welcome.

The package react-google-login is expecting the user to have React 16 or 17 installed, but you are using React 18 instead.

1:31:47 PM: npm ERR! Could not resolve dependency:
1:31:47 PM: npm ERR! peer react@"^16 || ^17" from react-google-login@5.2.2
1:31:47 PM: npm ERR! node_modules/react-google-login
1:31:47 PM: npm ERR!   react-google-login@"^5.2.2" from the root project
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! Conflicting peer dependency: react@17.0.2
1:31:47 PM: npm ERR! node_modules/react
1:31:47 PM: npm ERR!   peer react@"^16 || ^17" from react-google-login@5.2.2
1:31:47 PM: npm ERR!   node_modules/react-google-login
1:31:47 PM: npm ERR!     react-google-login@"^5.2.2" from the root project
1:31:47 PM: npm ERR!
1:31:47 PM: npm ERR! Fix the upstream dependency conflict, or retry
1:31:47 PM: npm ERR! this command with --force, or --legacy-peer-deps
1:31:47 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

You can either downgrade your react version or -force /use legacy-peer-deps to resolve the conflict as stated in the error message above.

I personally suggest you look for an alternative library at this point because the react-google-login package was last updated 2 years ago and also using legacy peer dependencies can lead to a situation where the conflicting packages don’t play nicely with one another.

Hope this helps.
Thanks.

3

That makes a ton of sense! Thank you. Do you have a good replacement package in mind instead of react-google-login ?

4

Hi @OhItsPM, the link below is the issues page of the react-google-login package with suggestions on using another alternative. Kindly follow the suggestions to see if it helps.

Let me know the outcome.

Thanks.