Conflicting peer dependency it builds fine locally but i don't know what to do now ? especially that i'm trying to deploy a three js web app which works fine on desktop but the images doesn't render and crash on mobile for some reason

mahmoudhosnyomran97 · March 6, 2023, 3:44pm

5:29:15 PM: build-image version: 35ea3a28b0f0d0edb232d068bae8e965fce407e9 (focal)
5:29:15 PM: buildbot version: 35ea3a28b0f0d0edb232d068bae8e965fce407e9
5:29:15 PM: Fetching cached dependencies
5:29:15 PM: Failed to fetch cache, continuing with build
5:29:15 PM: Starting to prepare the repo for build
5:29:15 PM: No cached dependencies found. Cloning fresh repo
5:29:15 PM: git clone --filter=blob:none GitHub - mahmoudhosnyomran97/my-3D-portfolio
5:29:16 PM: Preparing Git Reference refs/heads/master
5:29:16 PM: Parsing package.json dependencies
5:29:18 PM: Starting build script
5:29:18 PM: Installing dependencies
5:29:18 PM: Python version set to 2.7
5:29:18 PM: v16.19.1 is already installed.
5:29:19 PM: Now using node v16.19.1 (npm v8.19.3)
5:29:19 PM: Enabling Node.js Corepack
5:29:19 PM: Started restoring cached build plugins
5:29:19 PM: Finished restoring cached build plugins
5:29:19 PM: Attempting Ruby version 2.7.2, read from environment
5:29:19 PM: Using Ruby version 2.7.2
5:29:20 PM: Using PHP version 8.0
5:29:20 PM: Started restoring cached corepack dependencies
5:29:20 PM: Finished restoring cached corepack dependencies
5:29:20 PM: No npm workspaces detected
5:29:20 PM: Started restoring cached node modules
5:29:20 PM: Finished restoring cached node modules
5:29:20 PM: Installing npm packages using npm version 8.19.3
5:29:21 PM: npm ERR! code ERESOLVE
5:29:21 PM: npm ERR! ERESOLVE could not resolve
5:29:21 PM: npm ERR!
5:29:21 PM: npm ERR! While resolving: react-tilt@0.1.4
5:29:21 PM: Failed during stage ‘building site’: Build script returned non-zero exit code: 1 (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
5:29:21 PM: npm ERR! Found: react@18.2.0
5:29:21 PM: npm ERR! node_modules/react
5:29:21 PM: npm ERR! react@“^18.2.0” from the root project
5:29:21 PM: npm ERR! peer react@“^16.8.0 || ^17.0.0 || ^18.0.0” from @react-spring/animated@9.6.1
5:29:21 PM: npm ERR! node_modules/@react-spring/animated
5:29:21 PM: npm ERR! @react-spring/animated@“~9.6.1” from @react-spring/core@9.6.1
5:29:21 PM: npm ERR! node_modules/@react-spring/core
5:29:21 PM: npm ERR! @react-spring/core@“~9.6.1” from @react-spring/three@9.6.1
5:29:21 PM: npm ERR! node_modules/@react-spring/three
5:29:21 PM: npm ERR! @react-spring/three@“~9.6.1” from @react-three/drei@9.57.0
5:29:21 PM: npm ERR! node_modules/@react-three/drei
5:29:21 PM: npm ERR! @react-spring/animated@“~9.6.1” from @react-spring/three@9.6.1
5:29:21 PM: npm ERR! node_modules/@react-spring/three
5:29:21 PM: npm ERR! @react-spring/three@“~9.6.1” from @react-three/drei@9.57.0
5:29:21 PM: npm ERR! node_modules/@react-three/drei
5:29:21 PM: npm ERR! @react-three/drei@“^9.57.0” from the root project
5:29:21 PM: npm ERR! 17 more (@react-spring/core, @react-spring/shared, …)
5:29:21 PM: npm ERR!
5:29:21 PM: npm ERR! Could not resolve dependency:
5:29:21 PM: npm ERR! peer react@“^15.0.0 || ^16.0.0-beta || ^16.0.0” from react-tilt@0.1.4
5:29:21 PM: npm ERR! node_modules/react-tilt
5:29:21 PM: npm ERR! react-tilt@“^0.1.4” from the root project
5:29:21 PM: npm ERR!
5:29:21 PM: npm ERR! Conflicting peer dependency: react@16.14.0
5:29:21 PM: npm ERR! node_modules/react
5:29:21 PM: npm ERR! peer react@“^15.0.0 || ^16.0.0-beta || ^16.0.0” from react-tilt@0.1.4
5:29:21 PM: npm ERR! node_modules/react-tilt
5:29:21 PM: npm ERR! react-tilt@“^0.1.4” from the root project
5:29:21 PM: npm ERR!
5:29:21 PM: npm ERR! Fix the upstream dependency conflict, or retry
5:29:21 PM: npm ERR! this command with --force, or --legacy-peer-deps
5:29:21 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
5:29:21 PM: npm ERR!
5:29:21 PM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
5:29:21 PM: npm ERR! A complete log of this run can be found in:
5:29:21 PM: npm ERR! /opt/buildhome/.npm/_logs/2023-03-06T15_29_20_602Z-debug-0.log
5:29:21 PM: Error during npm install
5:29:21 PM: Build was terminated: Build script returned non-zero exit code: 1
5:29:21 PM: Failing build: Failed to build site
5:29:21 PM: Finished processing build request in 6.236s

clarnx · March 6, 2023, 9:34pm

Hi @mahmoudhosnyomran97, thanks for the post and welcome.
Looks like some of the packages you are using are not compatible with React 18.2.0.

There are two ways to resolve this issue.

Either you update your packages to the latest version.
OR
Allow legacy peer dependencies by using the command to install packages before you deploy.

npm install --legacy-peer-deps

Let me know the outcome.

Thanks.

nathanmartin · March 6, 2023, 9:38pm

Or 3. Use the NPM_FLAGS environment variable to define the flag to be used by Netlify at build time:

mahmoudhosnyomran97 · March 9, 2023, 6:56am

hi @clarnx first thank you for taking out of your time to reply and help me
second i actually tried what you suggested it runs fine locally on my machine but i still get the same error while i try to deploy it through netlify and i’m not sure what is the problem now but i still get the same error though.

mahmoudhosnyomran97 · March 9, 2023, 6:58am

hi @nathanmartin first thank you for taking out of your time to reply and help me
second i actually tried what you suggested but unfortunately i still get the same error while i try to deploy it through netlify and i’m not sure what is the problem now but i still get the same error though i tried both the legacy and the force method.

nathanmartin · March 9, 2023, 7:14am

@mahmoudhosnyomran97 There’s no guarantee that any one thing will fix every problem, as it’s possible there might be more than one thing wrong.

What was the failed build log when you performed your build with the NPM_FLAGS value set to --legacy-peer-deps?

mahmoudhosnyomran97 · March 9, 2023, 8:28am

same as before

10:27:08 AM: build-image version: f14e228ec2dbb3d6f5ee2f499343e1468b859b97 (focal)
10:27:08 AM: buildbot version: f14e228ec2dbb3d6f5ee2f499343e1468b859b97
10:27:09 AM: Fetching cached dependencies
10:27:09 AM: Failed to fetch cache, continuing with build
10:27:09 AM: Starting to prepare the repo for build
10:27:09 AM: No cached dependencies found. Cloning fresh repo
10:27:09 AM: git clone --filter=blob:none GitHub - mahmoudhosnyomran97/my-3D-portfolio
10:27:09 AM: Preparing Git Reference refs/heads/master
10:27:10 AM: Parsing package.json dependencies
10:27:11 AM: Starting build script
10:27:11 AM: Installing dependencies
10:27:11 AM: Python version set to 2.7
10:27:11 AM: v16.19.1 is already installed.
10:27:12 AM: Now using node v16.19.1 (npm v8.19.3)
10:27:12 AM: Enabling Node.js Corepack
10:27:12 AM: Started restoring cached build plugins
10:27:12 AM: Finished restoring cached build plugins
10:27:12 AM: Attempting Ruby version 2.7.2, read from environment
10:27:13 AM: Using Ruby version 2.7.2
10:27:13 AM: Using PHP version 8.0
10:27:13 AM: Started restoring cached corepack dependencies
10:27:13 AM: Finished restoring cached corepack dependencies
10:27:13 AM: No npm workspaces detected
10:27:13 AM: Started restoring cached node modules
10:27:13 AM: Finished restoring cached node modules
10:27:13 AM: Installing npm packages using npm version 8.19.3
10:27:15 AM: npm ERR! code ERESOLVE
10:27:15 AM: npm ERR! ERESOLVE could not resolve
10:27:15 AM: npm ERR!
10:27:15 AM: npm ERR! While resolving: react-tilt@0.1.4
10:27:15 AM: npm ERR! Found: react@18.2.0
10:27:15 AM: Failed during stage ‘building site’: Build script returned non-zero exit code: 1 (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
10:27:15 AM: npm ERR! node_modules/react
10:27:15 AM: npm ERR! react@“^18.2.0” from the root project
10:27:15 AM: npm ERR! peer react@“^16.8.0 || ^17.0.0 || ^18.0.0” from @react-spring/animated@9.6.1
10:27:15 AM: npm ERR! node_modules/@react-spring/animated
10:27:15 AM: npm ERR! @react-spring/animated@“~9.6.1” from @react-spring/core@9.6.1
10:27:15 AM: npm ERR! node_modules/@react-spring/core
10:27:15 AM: npm ERR! @react-spring/core@“~9.6.1” from @react-spring/three@9.6.1
10:27:15 AM: npm ERR! node_modules/@react-spring/three
10:27:15 AM: npm ERR! @react-spring/three@“~9.6.1” from @react-three/drei@9.57.0
10:27:15 AM: npm ERR! node_modules/@react-three/drei
10:27:15 AM: npm ERR! @react-spring/animated@“~9.6.1” from @react-spring/three@9.6.1
10:27:15 AM: npm ERR! node_modules/@react-spring/three
10:27:15 AM: npm ERR! @react-spring/three@“~9.6.1” from @react-three/drei@9.57.0
10:27:15 AM: npm ERR! node_modules/@react-three/drei
10:27:15 AM: npm ERR! @react-three/drei@“^9.57.0” from the root project
10:27:15 AM: npm ERR! 17 more (@react-spring/core, @react-spring/shared, …)
10:27:15 AM: npm ERR!
10:27:15 AM: npm ERR! Could not resolve dependency:
10:27:15 AM: npm ERR! peer react@“^15.0.0 || ^16.0.0-beta || ^16.0.0” from react-tilt@0.1.4
10:27:15 AM: npm ERR! node_modules/react-tilt
10:27:15 AM: npm ERR! react-tilt@“^0.1.4” from the root project
10:27:15 AM: npm ERR!
10:27:15 AM: npm ERR! Conflicting peer dependency: react@16.14.0
10:27:15 AM: npm ERR! node_modules/react
10:27:15 AM: npm ERR! peer react@“^15.0.0 || ^16.0.0-beta || ^16.0.0” from react-tilt@0.1.4
10:27:15 AM: npm ERR! node_modules/react-tilt
10:27:15 AM: npm ERR! react-tilt@“^0.1.4” from the root project
10:27:15 AM: npm ERR!
10:27:15 AM: npm ERR! Fix the upstream dependency conflict, or retry
10:27:15 AM: npm ERR! this command with --force, or --legacy-peer-deps
10:27:15 AM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
10:27:15 AM: npm ERR!
10:27:15 AM: npm ERR! See /opt/buildhome/.npm/eresolve-report.txt for a full report.
10:27:15 AM: npm ERR! A complete log of this run can be found in:
10:27:15 AM: npm ERR! /opt/buildhome/.npm/_logs/2023-03-09T08_27_13_735Z-debug-0.log
10:27:15 AM: Error during npm install
10:27:15 AM: Build was terminated: Build script returned non-zero exit code: 1
10:27:15 AM: Failing build: Failed to build site
10:27:15 AM: Finished processing build request in 6.391s

nathanmartin · March 9, 2023, 9:03am

The fact it still says this, makes me suspicious that it did not run with --legacy-peer-deps.

Have you confirmed that the environment variable NPM_FLAGS is set correctly?

clarnx · March 9, 2023, 1:25pm

Hi @mahmoudhosnyomran97, in addition to @nathanmartin’s suggestion, kindly add the environment variables by following the steps below.
I have tried it out myself by testing it with your repository.

The following steps below should solve the problem and deploy your site successfully.

Go to your project in Netlify and click on your site name.
Click on the Site settings button or tab on the right most side of the menu.
Click on Environment variables (New) on the left pane menu.
Click on the Add Variable button.
Type CI into the key input field, and then type false into the values field, and then click on the Create variable button.
Repeat the steps from step 4 to add another Environment variable by setting the key input to NPM_FLAGS and set values input to --legacy-peer-deps.
Once you are done click on the Deploys tab menu at the top of the page and then click on the Trigger deploy button and select Clear cache and deploy site option.

Let me know the outcome.

Thanks.

mahmoudhosnyomran97 · March 9, 2023, 2:22pm

that worked like a charm thank you so much clarnx for your help and support and i want to thank you too @nathanmartin for your help your suggestion might was the solution from the beginning and may be i didn’t do it correctly but anyways though i really appreciate your help as well and both your kind replies with my best regards.

SamO · March 9, 2023, 3:49pm

Thanks for confirming you found your solution! I’m glad to hear it.

vimuths123 · April 7, 2023, 10:11am

An awesome solution that saved lots of my time. Do you know why my .toml file with this failed and your solution worked?

my netlify.toml

[build]
  command = "npm install --legacy-peer-deps --force && npm run build"

clarnx · April 7, 2023, 2:43pm

Hi @vimuths123, thanks for the question and welcome.
Glad to know my suggestion also helped resolve your problem.

Regarding your question there could be a lot of reasons why the build command in the .toml file fails. I can’t tell for sure what the cause of the problem might be unless I see the build errors.

However what I do know is that the NPM_FLAGS environment variable is used to indicate the flags to pass to the npm install command.

Thanks.

Ahmad_Bakr · August 6, 2023, 4:59pm

It really works thank you very much