NPM error when deploying react app to netlify - reactjs

Question

I'm trying to deploy my website to netlify, I keep getting this error
9:59:45 PM: npm ERR! npm ERR! code EINVALIDTAGNAME
9:59:45 PM: npm ERR! npm ERR! Invalid tag name "^>= 4": Tags may not have any characters that encodeURIComponent encodes.
This is the complete failed deploy log on netlify
9:58:10 PM: Build ready to start
9:58:12 PM: build-image version: 3bcb38c35508b42e9121d4badfe6d8c66fd7a3f0
9:58:12 PM: build-image tag: v4.3.2
9:58:12 PM: buildbot version: 5f1a3c6e77d89b95b77370734ae1aecf3a51e9c1
9:58:12 PM: Fetching cached dependencies
9:58:12 PM: Failed to fetch cache, continuing with build
9:58:12 PM: Starting to prepare the repo for build
9:58:12 PM: No cached dependencies found. Cloning fresh repo
9:58:12 PM: git clone https://github.com/Abudibro/sneaker-select
9:58:20 PM: Preparing Git Reference refs/heads/main
9:58:22 PM: Parsing package.json dependencies
9:58:22 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus 'build/' in the Netlify UI
9:58:22 PM: Starting build script
9:58:22 PM: Installing dependencies
9:58:22 PM: Python version set to 2.7
9:58:23 PM: Downloading and installing node v16.12.0...
9:58:23 PM: Downloading https://nodejs.org/dist/v16.12.0/node-v16.12.0-linux-x64.tar.xz...
9:58:23 PM: Computing checksum with sha256sum
9:58:23 PM: Checksums matched!
9:58:26 PM: Now using node v16.12.0 (npm v8.1.0)
9:58:26 PM: Started restoring cached build plugins
9:58:26 PM: Finished restoring cached build plugins
9:58:26 PM: Attempting ruby version 2.7.2, read from environment
9:58:28 PM: Using ruby version 2.7.2
9:58:28 PM: Using PHP version 8.0
9:58:28 PM: Started restoring cached node modules
9:58:29 PM: Finished restoring cached node modules
9:58:29 PM: Installing NPM modules using NPM version 8.1.0
9:58:31 PM: npm WARN old lockfile
9:58:31 PM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
9:58:31 PM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
9:58:31 PM: npm WARN old lockfile
9:58:31 PM: npm WARN old lockfile This is a one-time fix-up, please be patient...
9:58:31 PM: npm WARN old lockfile
9:58:56 PM: npm WARN old lockfile Error: git dep preparation failed
9:58:56 PM: npm WARN old lockfile at ChildProcess.<anonymous> (/opt/buildhome/.nvm/versions/node/v16.12.0/lib/node_modules/npm/node_modules/#npmcli/promise-spawn/index.js:64:27)
9:58:56 PM: npm WARN old lockfile at ChildProcess.emit (node:events:390:28)
9:58:56 PM: npm WARN old lockfile at maybeClose (node:internal/child_process:1064:16)
9:58:56 PM: npm WARN old lockfile at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
9:58:56 PM: npm WARN old lockfile Could not fetch metadata for hero-slider#git+ssh://git#github.com/Abudibro/hero-slider.git#f13601fe5cb15b0a1c2f35f246d9342f4f3012e8 Error: git dep preparation failed
9:58:56 PM: npm WARN old lockfile at ChildProcess.<anonymous> (/opt/buildhome/.nvm/versions/node/v16.12.0/lib/node_modules/npm/node_modules/#npmcli/promise-spawn/index.js:64:27)
9:58:56 PM: npm WARN old lockfile at ChildProcess.emit (node:events:390:28)
9:58:56 PM: npm WARN old lockfile at maybeClose (node:internal/child_process:1064:16)
9:58:56 PM: npm WARN old lockfile at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) {
9:58:56 PM: npm WARN old lockfile cmd: '/opt/buildhome/.nvm/versions/node/v16.12.0/bin/node',
9:58:56 PM: npm WARN old lockfile args: [
9:58:56 PM: npm WARN old lockfile '/opt/buildhome/.nvm/versions/node/v16.12.0/lib/node_modules/npm/bin/npm-cli.js',
9:58:56 PM: npm WARN old lockfile 'install',
9:58:56 PM: npm WARN old lockfile '--force',
9:58:56 PM: npm WARN old lockfile '--cache=/opt/buildhome/.npm',
9:58:56 PM: npm WARN old lockfile '--prefer-offline=false',
9:58:56 PM: npm WARN old lockfile '--prefer-online=false',
9:58:56 PM: npm WARN old lockfile '--offline=false',
9:58:56 PM: npm WARN old lockfile '--no-progress',
9:58:56 PM: npm WARN old lockfile '--no-save',
9:58:56 PM: npm WARN old lockfile '--no-audit',
9:58:56 PM: npm WARN old lockfile '--include=dev',
9:58:56 PM: npm WARN old lockfile '--include=peer',
9:58:56 PM: npm WARN old lockfile '--include=optional',
9:58:56 PM: npm WARN old lockfile '--no-package-lock-only',
9:58:56 PM: npm WARN old lockfile '--no-dry-run'
9:58:56 PM: npm WARN old lockfile ],
9:58:56 PM: npm WARN old lockfile code: 1,
9:58:56 PM: npm WARN old lockfile signal: null,
9:58:56 PM: npm WARN old lockfile stdout: '',
9:58:56 PM: npm WARN old lockfile stderr: 'npm WARN using --force Recommended protections disabled.\n' +
9:58:56 PM: npm WARN old lockfile 'npm WARN old lockfile \n' +
9:58:56 PM: npm WARN old lockfile 'npm WARN old lockfile The package-lock.json file was created with an old version of npm,\n' +
9:58:56 PM: npm WARN old lockfile 'npm WARN old lockfile so supplemental metadata must be fetched from the registry.\n' +
9:58:56 PM: npm WARN old lockfile 'npm WARN old lockfile \n' +
9:58:56 PM: npm WARN old lockfile 'npm WARN old lockfile This is a one-time fix-up, please be patient...\n' +
9:58:56 PM: npm WARN old lockfile 'npm WARN old lockfile \n' +
9:58:56 PM: npm WARN old lockfile 'npm ERR! code EINVALIDTAGNAME\n' +
9:58:56 PM: npm WARN old lockfile 'npm ERR! Invalid tag name "^>= 4": Tags may not have any characters that encodeURIComponent encodes.\n' +
9:58:56 PM: npm WARN old lockfile '\n' +
9:58:56 PM: npm WARN old lockfile 'npm ERR! A complete log of this run can be found in:\n' +
9:58:56 PM: npm WARN old lockfile 'npm ERR! /opt/buildhome/.npm/_logs/2021-10-25T20_58_56_298Z-debug.log\n'
9:58:56 PM: npm WARN old lockfile }
9:59:08 PM: npm WARN deprecated flatten#1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
9:59:09 PM: npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
9:59:09 PM: npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
9:59:10 PM: npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
9:59:10 PM: npm WARN deprecated uuid#3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
9:59:12 PM: npm WARN deprecated sane#4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
9:59:12 PM: npm WARN deprecated querystring#0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
9:59:13 PM: npm WARN deprecated rollup-plugin-babel#4.4.0: This package has been deprecated and is no longer maintained. Please use #rollup/plugin-babel.
9:59:20 PM: npm WARN deprecated babel-eslint#10.1.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
9:59:21 PM: npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
9:59:21 PM: npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
9:59:22 PM: npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
9:59:23 PM: npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
9:59:23 PM: npm WARN deprecated svgo#1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
9:59:23 PM: npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
9:59:24 PM: npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
9:59:24 PM: npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
9:59:25 PM: npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
9:59:31 PM: npm WARN deprecated core-js#2.6.12: core-js#<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
9:59:45 PM: npm ERR! code 1
9:59:45 PM: npm ERR! git dep preparation failed
9:59:45 PM: npm ERR! command /opt/buildhome/.nvm/versions/node/v16.12.0/bin/node /opt/buildhome/.nvm/versions/node/v16.12.0/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/opt/buildhome/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
9:59:45 PM: npm ERR! npm WARN using --force Recommended protections disabled.
9:59:45 PM: npm ERR! npm WARN old lockfile
9:59:45 PM: npm ERR! npm WARN old lockfile The package-lock.json file was created with an old version of npm,
9:59:45 PM: npm ERR! npm WARN old lockfile so supplemental metadata must be fetched from the registry.
9:59:45 PM: npm ERR! npm WARN old lockfile
9:59:45 PM: npm ERR! npm WARN old lockfile This is a one-time fix-up, please be patient...
9:59:45 PM: npm ERR! npm WARN old lockfile
9:59:45 PM: npm ERR! npm ERR! code EINVALIDTAGNAME
9:59:45 PM: npm ERR! npm ERR! Invalid tag name "^>= 4": Tags may not have any characters that encodeURIComponent encodes.
9:59:45 PM: npm ERR!
9:59:45 PM: npm ERR! npm ERR! A complete log of this run can be found in:
9:59:45 PM: npm ERR! npm ERR! /opt/buildhome/.npm/_logs/2021-10-25T20_59_41_917Z-debug.log
9:59:45 PM: npm ERR! A complete log of this run can be found in:
9:59:45 PM: npm ERR! /opt/buildhome/.npm/_logs/2021-10-25T20_59_45_083Z-debug.log
9:59:45 PM: Error during NPM install
9:59:45 PM: Build was terminated: Build script returned non-zero exit code: 1
9:59:45 PM: Creating deploy upload records
9:59:45 PM: Failing build: Failed to build site
9:59:45 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1
9:59:45 PM: Finished processing build request in 1m33.030553565s
I've tried deleting my package-lock.json, I've also tried deleting my node_modules folder and running
npm install
I've also tried putting CI= in my deploy command
Nothing I've tried works. If you could help, that would be greatly appreciated
Nothing has worked

Answer 1

The issue comes from your dependency "hero-slider", which in turn specifies a peer dependency of the package styled-components as follow:
"peerDependencies": {
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^>= 4"
},
Since you have control over the hero-slider package.json, modify that line and you should be good to go. Edit for clarity: that is, replace it with a specific tag version of the package styled-components, for example "4.3.1".
Alternatively, since your fork of the hero-slider does not seem to add any new feature (besides removing few JS logs), you may link to the hero-slider package from the npm registry. Unless you want to make future commits to your github fork, without publishing it on npm.