I am trying to:
Fix the dependency issues that arise in my react app
Understand why they are happening
Discover how to best approach these kind of issues to address them properly, without doing anything undesirable (such as hiding the warnings, downgrading, using legacy dependencies, etc)
I want to be able to run npm install and for everything to run perfectly.
To better explain my issue, running npm install returns the following:
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-side-effect#1.2.0
npm WARN Found: react#18.2.0
npm WARN node_modules/react
npm WARN react#"^18.2.0" from the root project
npm WARN 9 more (#fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect#1.2.0
npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN react-side-effect#"^1.1.0" from react-document-meta#3.0.0-beta.2
npm WARN node_modules/react-document-meta
npm WARN
npm WARN Conflicting peer dependency: react#16.14.0
npm WARN node_modules/react
npm WARN peer react#"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect#1.2.0
npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN react-side-effect#"^1.1.0" from react-document-meta#3.0.0-beta.2
npm WARN node_modules/react-document-meta
removed 1 package, and audited 1573 packages in 5s
223 packages are looking for funding
run `npm fund` for details
9 vulnerabilities (3 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
Which suggests running the audit command, and hence npm audit returns this:
# npm audit report
nth-check <2.0.1
Severity: high
Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr
fix available via `npm audit fix --force`
Will install react-scripts#2.1.3, which is a breaking change
node_modules/svgo/node_modules/nth-check
css-select <=3.1.0
Depends on vulnerable versions of nth-check
node_modules/svgo/node_modules/css-select
svgo 1.0.0 - 1.3.2
Depends on vulnerable versions of css-select
node_modules/svgo
#svgr/plugin-svgo <=5.5.0
Depends on vulnerable versions of svgo
node_modules/#svgr/plugin-svgo
#svgr/webpack 4.0.0 - 5.5.0
Depends on vulnerable versions of #svgr/plugin-svgo
node_modules/#svgr/webpack
react-scripts >=2.1.4
Depends on vulnerable versions of #svgr/webpack
node_modules/react-scripts
scss-tokenizer *
Severity: moderate
Regular expression denial of service in scss-tokenizer - https://github.com/advisories/GHSA-7mwh-4pqv-wmr8
fix available via `npm audit fix --force`
Will install node-sass#4.5.3, which is a breaking change
node_modules/scss-tokenizer
sass-graph >=2.2.0
Depends on vulnerable versions of scss-tokenizer
node_modules/sass-graph
node-sass >=4.6.0
Depends on vulnerable versions of sass-graph
node_modules/node-sass
9 vulnerabilities (3 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
And then as suggested, running npm audit fix --force, which returns this:
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating node-sass to 4.5.3, which is a SemVer major change.
npm WARN audit Updating react-scripts to 2.1.3, which is a SemVer major change.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-side-effect#1.2.0
npm WARN Found: react#18.2.0
npm WARN node_modules/react
npm WARN peer react#">=16.3" from #fortawesome/react-fontawesome#0.2.0
npm WARN node_modules/#fortawesome/react-fontawesome
npm WARN #fortawesome/react-fontawesome#"^0.2.0" from the root project
npm WARN 8 more (#testing-library/react, react-document-meta, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react#"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect#1.2.0
npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN react-side-effect#"^1.1.0" from react-document-meta#3.0.0-beta.2
npm WARN node_modules/react-document-meta
npm WARN
npm WARN Conflicting peer dependency: react#16.14.0
npm WARN node_modules/react
npm WARN peer react#"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-side-effect#1.2.0
npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN react-side-effect#"^1.1.0" from react-document-meta#3.0.0-beta.2
npm WARN node_modules/react-document-meta
npm WARN deprecated fsevents#1.2.4: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated source-map-url#0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated topo#2.0.2: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated flatten#1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated eslint-loader#2.1.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated hoek#4.2.1: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated circular-json#0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated sane#2.5.2: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated html-webpack-plugin#4.0.0-alpha.2: please switch to a stable version
npm WARN deprecated babel-eslint#9.0.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated joi#11.4.0: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated uglify-es#3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated tar#2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated core-js#2.6.4: core-js#<3.23.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. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c /var/folders/xb/j8892d016d774vwslfyy7q500000gn/T/postinstall6573775593.sh
npm ERR! Building: /Users/nick/.nvm/versions/node/v18.3.0/bin/node /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli '/Users/nick/.nvm/versions/node/v18.3.0/bin/node',
npm ERR! gyp verb cli '/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using node-gyp#3.8.0
npm ERR! gyp info using node#18.3.0 | darwin | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` succeeded python2 /Library/Frameworks/Python.framework/Versions/2.7/bin/python2
npm ERR! gyp verb check python version `/Library/Frameworks/Python.framework/Versions/2.7/bin/python2 -c "import sys; print "2.7.13
npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 18.3.0
npm ERR! gyp verb command install [ '18.3.0' ]
npm ERR! gyp verb install input version string "18.3.0"
npm ERR! gyp verb install installing version: 18.3.0
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version is already installed, need to check "installVersion"
npm ERR! gyp verb got "installVersion" 9
npm ERR! gyp verb needs "installVersion" 9
npm ERR! gyp verb install version is good
npm ERR! gyp verb get node dir target node version installed: 18.3.0
npm ERR! gyp verb build dir attempting to create "build" dir: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build
npm ERR! gyp verb build dir "build" dir needed to be created? /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build/config.gypi
npm ERR! (node:41219) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "make"
npm ERR! gyp info spawn /Library/Frameworks/Python.framework/Versions/2.7/bin/python2
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args '/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/gyp/gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'make',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass/build/config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args '/Users/nick/.node-gyp/18.3.0/include/node/common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=/Users/nick/.node-gyp/18.3.0',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/nick/.node-gyp/18.3.0/<(target_arch)/node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
npm ERR!
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
npm ERR!
npm ERR! No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
npm ERR!
npm ERR! gyp: No Xcode or CLT version detected!
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: `gyp` failed with exit code: 1
npm ERR! gyp ERR! stack at ChildProcess.onCpExit (/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/lib/configure.js:345:16)
npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:527:28)
npm ERR! gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:291:12)
npm ERR! gyp ERR! System Darwin 21.5.0
npm ERR! gyp ERR! command "/Users/nick/.nvm/versions/node/v18.3.0/bin/node" "/Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/nick/Documents/Coding/Projects/Practice/Start-Authed/client/node_modules/node-sass
npm ERR! gyp ERR! node -v v18.3.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/nick/.npm/_logs/2022-07-09T13_00_06_088Z-debug-0.log
I can get rid of most errors by running this: npm install --legacy-peer-deps - an undesirable command - which still returns some vulnerability warnings:
removed 57 packages, and audited 1516 packages in 7s
223 packages are looking for funding
run `npm fund` for details
9 vulnerabilities (3 moderate, 6 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
So I am a little stuck as to how to fix these issues properly.
Here is my package.json file:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.2.0",
"#hookform/resolvers": "^2.9.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.2.1",
"#types/jest": "^28.1.4",
"#types/node": "^18.0.3",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-document-meta": "^3.0.0-beta.2",
"react-dom": "^18.2.0",
"react-hook-form": "^7.33.1",
"react-modal": "^3.15.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write ."
},
"prettier": {
"printWidth": 120,
"useTabs": false,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-document-meta": "^3.0.2",
"#types/react-modal": "^3.13.1",
"jest-watch-typeahead": "^1.1.0",
"msw": "^0.43.1",
"prettier": "2.7.1"
}
}
Being prompted with 9 vulnerabilities makes me concerned that something is not right. From my understanding (which may be incorrect), I am assuming that some packages require a version of react that is older than the current version (might be 18 or something), which makes me assume that downgrading might fix them, but then the consequence of that is presumably I’ll never be able to update my version of react, which would suck. Downgrading also does not feel right.
This might be relevant: I am also getting this warning in the JS console even though componentWillMount is not being used, which makes me believe that an outdated library is using it.
Does anyone know why these errors keep occurring, and how to actually fix or at least go about them properly, without having to downgrade or do anything that’s undesirable? And should I worry about these issues? Is it common to see issues after an npm install?
Note that moving react-scripts into devDependencies does nothing, as suggested by this post.
This is how you should read dependency issues:
// this line states that there's an issue with a 'peer' dependency which is a dependency of your dependency. 'overriding' means you explicitly specified a dependency version higher than a peer dependency
npm WARN ERESOLVE overriding peer dependency
//this is the dependency that has an issue
npm WARN While resolving: react-side-effect#1.2.0
// this is what was found in your project
npm WARN Found: react#18.2.0
npm WARN node_modules/react
npm WARN react#"^18.2.0" from the root project
npm WARN 9 more (#fortawesome/react-fontawesome, ...)
npm WARN
// this is what your failed dependency wants react that is no more than version 16, you specified version 18 explicitly which is where the conflict occurs
npm WARN Could not resolve dependency:
npm WARN peer react#"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from react-
side-effect#1.2.0
//these are the modules that your dependency uses that requires the above version
npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN react-side-effect#"^1.1.0" from react-document-meta#3.0.0-beta.2
npm WARN node_modules/react-document-meta
npm WARN
npm WARN Conflicting peer dependency: react#16.14.0
npm WARN node_modules/react
npm WARN peer react#"^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" from
react-side-effect#1.2.0
npm WARN node_modules/react-document-meta/node_modules/react-side-effect
npm WARN react-side-effect#"^1.1.0" from react-document-meta#3.0.0-
beta.2
// this is the named dependency in your file that causes the issue
npm WARN node_modules/react-document-meta
Now that we know that react 18 does not work with react-document-meta
we should either go down to the required version and again repeat the process
or
lift up the dependency version and hope that the newer version has a fix
if we look at npm registry for the dependency we can see that the module hasnt been last published 4 years ago, so lifting the version up from this wont be possible. [Looking at the github project page people have similar issues] (https://github.com/kodyl/react-document-meta/issues/48) and recommend moving to react-helmet.
in your case we can revert react 18 to 16 latest and continue using it or transition to using something else as theres no choice unless you want to fork the dependency and work on it yourself.
further:
npm audit describes known issues with the node packages that you are using, you can take a look and see if any of the deployed dependencies have significant issues to your work then you should try and lift them up, otherwise you can ignore. Sometimes dependencies cannot be lifted up and you will have to change to using something else as its not being maintained anymore.
npm fix will attempt automatically updating those vulnerable dependencies but fails in your case as your version mismatch prevents it from proceeding.
you should look into specifying npm versions and allow for minor versions or later versions automatically https://docs.npmjs.com/about-semantic-versioning
you can run npm outdated to check for outdated node versions in your code then npm update to attempt updating versions
if you modify the package.json manually without doing npm add or npm update then theres no dependency checking which can cause issues like yours, I'd recommend to always use npm add <name>, npm uninstall <name> and npm update <name> to avoid issues
finally this is a fixed package.json (working on my machine but may not work code-wise), I'd suggest upgrading everything and moving to react-helmet
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.2.0",
"#hookform/resolvers": "^2.9.5",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^11",
"#testing-library/user-event": "^14.2.1",
"#types/jest": "^28.1.4",
"#types/node": "^18.0.3",
"#types/react": "^16",
"#types/react-dom": "^16.0.0",
"node-sass": "^7.0.1",
"react": "^16.0.0",
"react-document-meta": "^3.0.0-beta.5",
"react-dom": "^16.0.0",
"react-hook-form": "^7.33.1",
"react-modal": "^3.15.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4",
"yup": "^0.32.11"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "prettier --write ."
},
"prettier": {
"printWidth": 120,
"useTabs": false,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-document-meta": "^3.0.2",
"#types/react-modal": "^3.13.1",
"jest-watch-typeahead": "^1.1.0",
"msw": "^0.43.1",
"prettier": "2.7.1"
}
}
Created a react app and have it working fine on my local server.I used Github as my source control and have all packages up to date, and a build filed created
I then uploaded it to Netlify and connected it to my Github. Once i tried to have it hosted, it failed the build process.
here is a snippet of the deploy log i get, i cant fit all of it on here
10:05:56 AM: Build ready to start
10:05:59 AM: build-image version: a6bb34428a07e7de82f4df5dfe1843fbde91f670 (focal)
10:05:59 AM: build-image tag: v4.5.1
10:05:59 AM: buildbot version: 047dc2001d6cf9f76ba77ae34521e2065ab5c2bd
10:05:59 AM: Fetching cached dependencies
10:05:59 AM: Failed to fetch cache, continuing with build
10:05:59 AM: Starting to prepare the repo for build
10:05:59 AM: No cached dependencies found. Cloning fresh repo
10:05:59 AM: git clone https://github.com/jmoonoz/Moonoz2.0
10:06:01 AM: Preparing Git Reference refs/heads/master
10:06:02 AM: Parsing package.json dependencies
10:06:02 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'build' versus '/build' in the Netlify UI
10:06:03 AM: Starting build script
10:06:03 AM: Installing dependencies
10:06:03 AM: Python version set to 2.7
10:06:03 AM: v16.13.1 is already installed.
10:06:04 AM: Now using node v16.13.1 (npm v8.1.2)
10:06:04 AM: Started restoring cached build plugins
10:06:04 AM: Finished restoring cached build plugins
10:06:04 AM: Attempting ruby version 2.7.2, read from environment
10:06:06 AM: Using ruby version 2.7.2
10:06:06 AM: Using PHP version 8.0
10:06:06 AM: Started restoring cached node modules
10:06:06 AM: Finished restoring cached node modules
10:06:07 AM: Installing NPM modules using NPM version 8.1.2
10:06:26 AM: npm WARN deprecated flatten#1.0.3: flatten is deprecated in favor of utility frameworks such as lodash.
10:06:26 AM: npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
10:06:26 AM: npm WARN deprecated har-validator#5.1.5: this library is no longer supported
10:06:26 AM: npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
10:06:28 AM: 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.
10:06:28 AM: 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.
10:06:29 AM: npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
10:06:30 AM: npm WARN deprecated sane#4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
10:06:30 AM: npm WARN deprecated querystring#0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
10:06:31 AM: npm WARN deprecated rollup-plugin-babel#4.4.0: This package has been deprecated and is no longer maintained. Please use #rollup/plugin-babel.
10:06:41 AM: npm WARN deprecated babel-eslint#10.1.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
10:06:43 AM: npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
10:06:43 AM: npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
10:06:44 AM: npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
10:06:45 AM: npm WARN deprecated querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
10:06:46 AM: npm WARN deprecated svgo#1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
10:06:46 AM: npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
10:06:46 AM: npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
10:06:47 AM: npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
10:06:49 AM: npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
10:06:57 AM: 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.
10:10:03 AM: npm ERR! code 1
10:10:03 AM: npm ERR! path /opt/build/repo/node_modules/node-sass
10:10:03 AM: npm ERR! command failed
10:10:03 AM: npm ERR! command sh -c node scripts/build.js
...
10:10:03 AM: npm ERR! gyp ERR! cwd /opt/build/repo/node_modules/node-sass
10:10:03 AM: npm ERR! gyp ERR! node -v v16.13.1
10:10:03 AM: npm ERR! gyp ERR! node-gyp -v v7.1.2
10:10:03 AM: npm ERR! gyp ERR! not ok
10:10:03 AM: npm ERR! Build failed with error code: 1
10:10:03 AM: npm ERR! A complete log of this run can be found in:
10:10:03 AM: npm ERR! /opt/buildhome/.npm/_logs/2021-12-08T18_10_03_338Z-debug.log
10:10:03 AM: Error during NPM install
10:10:03 AM: Build was terminated: Build script returned non-zero exit code: 1
10:10:03 AM: Failing build: Failed to build site
here is my package.json file
{
"name": "moonoz2.0",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.6.1",
"core-js": "^3.19.3",
"emailjs-com": "^3.2.0",
"imagesloaded": "^4.1.4",
"masonry-layout": "^4.2.2",
"node-gyp": "^8.4.1",
"node-sass": "^5.0.0",
"react": "^17.0.2",
"react-bootstrap": "^2.0.0",
"react-dom": "^17.0.2",
"react-icons": "^4.3.1",
"react-router-dom": "^6.0.2",
"react-scripts": "4.0.3",
"tar": "^6.1.11",
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
When running npm audit, it says I have 87 vulnerabilities. npm audit fix and npm audit fix --force do not fix the issues.
Here is the output for the main problems on npm audit fix.
browserslist 4.0.0 - 4.16.4
Severity: moderate
Regular Expression Denial of Service
dns-packet <5.2.2
Severity: high
Memory Exposure - https://npmjs.com/advisories/1745
fix available via `npm audit fix --force`
Will install react-scripts#1.1.5, which is a breaking change
postcss 7.0.0 - 8.2.9
Severity: moderate
Regular Expression Denial of Service
upon further inspection in package-lock.json here is the dns-packet:
"dns-packet": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
"integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
"requires": {
"ip": "^1.1.0",
"safe-buffer": "^5.0.1"
}
},
It says on npm documentation that the latest version of dns-packet should be 5.2.3. I tried deleting package-lock.json and node modules and running npm install but that did not work. Here is what npm install spits out:
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated babel-eslint#10.1.0: babel-eslint is now #babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated #hapi/address#2.1.4: Moved to 'npm install #sideway/address'
npm WARN deprecated rollup-plugin-babel#4.4.0: This package has been deprecated and is no longer maintained. Please use #rollup/plugin-babel.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated #hapi/hoek#8.5.1: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated #hapi/joi#15.1.1: Switch to 'npm install joi'
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.
At this point I have no idea what the problem is. I hadn't installed anything for a while. Went to go install redux and react-redux and it started telling me there were vulnerabilities. Not sure where to go from here.
edit: I ran npm i npm#latest and shows this in the console:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: #babel/core#7.12.3
npm ERR! node_modules/#babel/core
npm ERR! #babel/core#"7.12.3" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"4.0.3" from the root project
npm ERR! #babel/core#"^7.12.3" from #svgr/webpack#5.5.0
npm ERR! node_modules/#svgr/webpack
npm ERR! #svgr/webpack#"5.5.0" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
npm ERR! react-scripts#"4.0.3" from the root project
npm ERR! 9 more (babel-jest, babel-loader, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer #babel/core#"^7.13.0" from #babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining#7.13.12
npm ERR! node_modules/#babel/preset-env/node_modules/#babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining
npm ERR! #babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining#"^7.13.12" from #babel/preset-env#7.14.2
npm ERR! node_modules/#babel/preset-env
npm ERR! #babel/preset-env#"^7.12.1" from #svgr/webpack#5.5.0
npm ERR! node_modules/#svgr/webpack
npm ERR! #svgr/webpack#"5.5.0" from react-scripts#4.0.3
npm ERR! node_modules/react-scripts
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.
run npm audit fix --force with root privilege
if does not work you have to update npm
npm install npm#latest -g
the possible solution is to update all node modules
don't forget to take a backup of your packages.json file
npm i npm#latest
i have a clone from a big app on my system, after i ran npm install, this is my log:
arash_sh#Arashs-MacBook-Pro talentcoach-web % npm install
npm WARN deprecated react-persian-calendar-date-picker#1.1.6: react-persian-calendar-datepicker is deprecated! please use the new react-modern-calendar-datepicker https://kiarash-z.github.io/react-modern-calendar-datepicker
npm WARN deprecated #formatjs/intl-unified-numberformat#3.3.7: We have renamed the package to #formatjs/intl-numberformat
npm WARN deprecated eslint-loader#2.2.1: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated core-js#2.6.12: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
npm WARN deprecated ant-design-palettes#1.1.3: Please use #ant-design/colors to replace ant-design-palettes
npm WARN deprecated browserslist#2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated browserslist#1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated core-js#1.2.7: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js#3.
npm WARN deprecated circular-json#0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated kleur#2.0.2: Please upgrade to kleur#3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated left-pad#1.3.0: use String.prototype.padStart()
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated request-promise-native#1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator#5.1.5: this library is no longer supported
> fsevents#1.2.13 install /Users/arash_sh/Desktop/LDI/IranTalent/talentcoach-web/node_modules/fsevents
> node install.js
No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'.
No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'.
gyp: No Xcode or CLT version detected!
gyp ERR! configure error
gyp ERR! stack Error: `gyp` failed with exit code: 1
gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16)
gyp ERR! stack at ChildProcess.emit (events.js:314:20)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:276:12)
gyp ERR! System Darwin 19.6.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "rebuild"
gyp ERR! cwd /Users/arash_sh/Desktop/LDI/IranTalent/talentcoach-web/node_modules/fsevents
gyp ERR! node -v v14.9.0
gyp ERR! node-gyp -v v5.1.0
gyp ERR! not ok
> core-js#2.6.12 postinstall /Users/arash_sh/Desktop/LDI/IranTalent/talentcoach-web/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
> core-js-pure#3.8.2 postinstall /Users/arash_sh/Desktop/LDI/IranTalent/talentcoach-web/node_modules/core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
> core-js#3.8.2 postinstall /Users/arash_sh/Desktop/LDI/IranTalent/talentcoach-web/node_modules/react-app-polyfill/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN notsup Unsupported engine for react-lottie#1.2.3: wanted: {"npm":"^3.0.0"} (current: {"node":"14.9.0","npm":"6.14.8"})
npm WARN notsup Not compatible with your version of node/npm: react-lottie#1.2.3
npm WARN slick-carousel#1.8.1 requires a peer of jquery#>=1.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-react-app#2.1.0 requires a peer of babel-eslint#^7.2.3 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-react-app#2.1.0 requires a peer of eslint-plugin-jsx-a11y#^5.1.1 but none is installed. You must install peer dependencies yourself.
added 2287 packages from 1103 contributors and audited 2291 packages in 110.296s
79 packages are looking for funding
run `npm fund` for details
found 80 vulnerabilities (72 low, 3 moderate, 5 high)
run `npm audit fix` to fix them, or `npm audit` for details
and after that when i ran npm start this is my log:
> talentcoach-web#0.0.1 prestart /Users/arash_sh/Desktop/LDI/IranTalent/talentcoach-web
> yarn clean
sh: yarn: command not found
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file sh
npm ERR! errno ENOENT
npm ERR! talentcoach-web#0.0.1 prestart: `yarn clean`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the talentcoach-web#0.0.1 prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/arash_sh/.npm/_logs/2021-01-08T17_16_26_747Z-debug.log
i know project is on razzle.
I think you need to download and install XCode
gyp: No Xcode or CLT version detected!