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.
