Resolving react dependency issues, vulnerabilities, warnings, conflicts and different versions - reactjs
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"
}
}
Related
Issue with Material UI Icons npm installation : unable to resolve dependency tree
---------ISSUE RESOLVED - SOLUTION AT THE END OF QUESTION-------- I was trying to install Material UI Icons in my Netflix-Clone React.js project with npm, but I got the following error - PS D:\REACT Projects\netflix> npm i #mui/icons-material #mui/material npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: netflix#0.1.0 npm ERR! Found: react#18.0.0 npm ERR! node_modules/react npm ERR! react#"^18.0.0" from the root project npm ERR! peer react#">=16.8.0" from #emotion/react#11.8.2 npm ERR! node_modules/#emotion/react npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.5.3 npm ERR! node_modules/#mui/material npm ERR! #mui/material#"^5.5.3" from the root project npm ERR! 1 more (#mui/icons-material) npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.8.1 npm ERR! node_modules/#emotion/styled npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.5.3 npm ERR! node_modules/#mui/material npm ERR! #mui/material#"^5.5.3" from the root project npm ERR! 1 more (#mui/icons-material) npm ERR! 1 more (#emotion/styled) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react#"^17.0.0" from #mui/material#5.5.3 npm ERR! node_modules/#mui/material npm ERR! #mui/material#"^5.5.3" from the root project npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.5.1 npm ERR! node_modules/#mui/icons-material npm ERR! #mui/icons-material#"^5.5.1" from the root project 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. Below is my package.json file - { "name": "netflix", "version": "0.1.0", "private": true, "dependencies": { "#mui/icons-material": "^5.5.1", "#mui/material": "^5.5.3", "#testing-library/jest-dom": "^5.16.3", "#testing-library/react": "^13.0.0", "#testing-library/user-event": "^14.0.4", "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "5.0.0", "sass": "^1.49.10", "web-vitals": "^2.1.4" }, "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" ] } } I saw a stackoverflow post with similar issue, and tried implementing the solutions mentioned there, but was unsuccessful. At first, I retried this command with --force - npm i #mui/icons-material #mui/material --force This allowed me to install the MUI Icons package without any error, however, I faced numerous errors when I tried to use the icons in my project. Next, I changed the react and react-dom versions to 16.8.0 in the package.json file, and hit npm install. However, this time also I got the following error - PS D:\REACT Projects\netflix> npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: netflix#0.1.0 npm ERR! Found: react#16.14.0 npm ERR! node_modules/react npm ERR! react#"^16.8.0" from the root project npm ERR! peer react#">=16.8.0" from #emotion/react#11.8.2 npm ERR! node_modules/#emotion/react npm ERR! peerOptional #emotion/react#"^11.5.0" from #mui/material#5.5.3 npm ERR! node_modules/#mui/material npm ERR! #mui/material#"^5.5.3" from the root project npm ERR! 1 more (#mui/icons-material) npm ERR! peer #emotion/react#"^11.0.0-rc.0" from #emotion/styled#11.8.1 npm ERR! node_modules/#emotion/styled npm ERR! peerOptional #emotion/styled#"^11.3.0" from #mui/material#5.5.3 npm ERR! node_modules/#mui/material npm ERR! #mui/material#"^5.5.3" from the root project npm ERR! 1 more (#mui/icons-material) npm ERR! 1 more (#emotion/styled) npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react#"^17.0.0" from #mui/material#5.5.3 npm ERR! node_modules/#mui/material npm ERR! #mui/material#"^5.5.3" from the root project npm ERR! peer #mui/material#"^5.0.0" from #mui/icons-material#5.5.1 npm ERR! node_modules/#mui/icons-material npm ERR! #mui/icons-material#"^5.5.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry I honestly don't know what to do now. I thought there would be a better solution available on the internet, but everywhere I see the same answers, either to use --force/--legacy-peer-deps or to downgrade my react/react-dom version. As explained above, none of these options are working. Is there any better solution to this? I'm honestly surprised that such a well-known package would have this many problems while installing. EDIT - Issue Resolved Thanks to #ckesplin's help, it finally worked. I followed the below steps - Executed npx create-react-app netflix. Changed react and react-dom version to 17.0.0 from 18.0.0. Deleted package-lock.json file and node_modules folder. Then hit npm install. Executed npm i #mui/icons-material #mui/material... it installed successfully. However, while using an icon, I again got a bunch of errors for Module not found: Can't resolve #emotion/styled. So I had to npm i #emotion/react #emotion/styled
It appears by the log that #mui/material#5.5.3 requires react#"^17.0.0". (You attempted both react 18.0.0 and 16.14.0, but not ^17.0.0) Replace the following inside of your package.json and give it the ol' npm install "dependencies": { ... "react": "^17.0.0", "react-dom": "^17.0.0", ... },
This has happened with me too you can install it using --force at the last of the command. npm i material-ui --force
try the command with --force. npm i #mui/icons-material #mui/material --force. this worked for me.
Twilio React JS Integration
I am trying to integrate Twilio into React using the documentation: https://www.twilio.com/blog/build-a-custom-video-chat-app-with-react-and-twilio-programmable-video As mentioned in the document I cloned the GIT Repo and tried installing it. git clone https://github.com/ahl389/twilio-video-starter-kit cd twilio-video-starter-kit npm install When I try to install I am getting a long list of errors. npm WARN deprecated ini#1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue npm WARN deprecated flatten#1.0.3: flatten is deprecated in favor of utility frameworks such as lodash. npm WARN deprecated #hapi/bourne#1.3.2: This version has been deprecated and is no longer supported or maintained npm WARN deprecated #hapi/topo#3.1.6: This version has been deprecated and is no longer supported or maintained 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 har-validator#5.1.5: this library is no longer supported npm WARN deprecated source-map-resolve#0.6.0: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated fsevents#2.1.3: "Please update to latest v2.3 or v2.2" npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated source-map-resolve#0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated source-map-url#0.4.0: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated sane#4.1.0: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added npm WARN deprecated debug#3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) npm WARN deprecated debug#3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797) 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 querystring#0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. 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 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. 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. 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. 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 svgo#1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x. 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.11: core-js#<3.4 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. ⸨##################⸩ ⠴ reify:typescript: timing reifyNode:node_modules/rxjs Completed in 38945ms The installation will hang for some time at this point and finally another set of errors occur -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/operators.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/operators.o ../src/libsass/src/operators.cpp npm ERR! c++ '-DNODE_GYP_MODULE_NAME=libsass' '-DUSING_UV_SHARED=1' '-DUSING_V8_SHARED=1' '-DV8_DEPRECATION_WARNINGS=1' '-DV8_DEPRECATION_WARNINGS' '-DV8_IMMINENT_DEPRECATION_WARNINGS' '-D_GLIBCXX_USE_CXX11_ABI=1' '-D_DARWIN_USE_64_BIT_INODE=1' '-D_LARGEFILE_SOURCE' '-D_FILE_OFFSET_BITS=64' '-DOPENSSL_NO_PINSHARED' '-DOPENSSL_THREADS' '-DLIBSASS_VERSION="3.5.5"' -I/Users/macbook/.node-gyp/16.10.0/include/node -I/Users/macbook/.node-gyp/16.10.0/src -I/Users/macbook/.node-gyp/16.10.0/deps/openssl/config -I/Users/macbook/.node-gyp/16.10.0/deps/openssl/openssl/include -I/Users/macbook/.node-gyp/16.10.0/deps/uv/include -I/Users/macbook/.node-gyp/16.10.0/deps/zlib -I/Users/macbook/.node-gyp/16.10.0/deps/v8/include -I../src/libsass/include -O3 -gdwarf-2 -mmacosx-version-min=10.7 -arch x86_64 -Wall -Wendif-labels -W -Wno-unused-parameter -std=c++11 -stdlib=libc++ -fno-strict-aliasing -MMD -MF ./Release/.deps/Release/obj.target/libsass/src/libsass/src/output.o.d.raw -c -o Release/obj.target/libsass/src/libsass/src/output.o ../src/libsass/src/output.cpp ..... Lots of Similar Errors..... npm ERR! gyp info it worked if it ends with ok npm ERR! gyp verb cli [ npm ERR! gyp verb cli '/Users/macbook/.nvm/versions/node/v16.10.0/bin/node', npm ERR! gyp verb cli '/Users/macbook/REACT/twilio-video-starter-kit/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#16.10.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 /usr/bin/python2 npm ERR! gyp verb check python version `/usr/bin/python2 -c "import sys; print "2.7.16 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: 16.10.0 npm ERR! gyp verb command install [ '16.10.0' ] npm ERR! gyp verb install input version string "16.10.0" npm ERR! gyp verb install installing version: 16.10.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: 16.10.0 npm ERR! gyp verb build dir attempting to create "build" dir: /Users/macbook/REACT/twilio-video-starter-kit/node_modules/node-sass/build npm ERR! gyp verb build dir "build" dir needed to be created? /Users/macbook/REACT/twilio-video-starter-kit/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/macbook/REACT/twilio-video-starter-kit/node_modules/node-sass/build/config.gypi npm ERR! (node:62179) [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/macbook/REACT/twilio-video-starter-kit/node_modules/node-sass/config.gypi npm ERR! gyp verb common.gypi checking for gypi file: /Users/macbook/REACT/twilio-video-starter-kit/node_modules/node-sass/common.gypi npm ERR! gyp verb gyp gyp format was not specified; forcing "make" npm ERR! gyp info spawn /usr/bin/python2 npm ERR! gyp info spawn args [ npm ERR! gyp info spawn args '/Users/macbook/REACT/twilio-video-starter-kit/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/macbook/REACT/twilio-video-starter-kit/node_modules/node-sass/build/config.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/macbook/REACT/twilio-video-starter-kit/node_modules/node-gyp/addon.gypi', npm ERR! gyp info spawn args '-I', npm ERR! gyp info spawn args '/Users/macbook/.node-gyp/16.10.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/macbook/.node-gyp/16.10.0', npm ERR! gyp info spawn args '-Dnode_gyp_dir=/Users/macbook/REACT/twilio-video-starter-kit/node_modules/node-gyp', npm ERR! gyp info spawn args '-Dnode_lib_file=/Users/macbook/.node-gyp/16.10.0/<(target_arch)/node.lib', ..... Lots of Similar Errors..... (I can't even paste all the errors here - word limit) I tried removing packages from package.json file, and found out(I think) the main issue is with "node-sass": "^4.14.1" This version of node-sass is not compatible with node version(latest version) which I have installed in my system which is macbook#Macbooks-MacBook-Air ~ % node -v v16.10.0 Kindly suggest me to what to do next as I don't know what to do next. I can't change the node version to a previous one. Need to run in the latest version. Any help will be appreciated.
The node-sass package suggests that the Node 16 is supported in node-sass version 6+. So, install the latest version of node-sass (npm i node-sass#latest) or update the package.json dependency to "node-sass": "^7.0.1" and then try a full install again (npm install). Edit I had to perform a couple of extra steps to get this to work. Add "node-sass": "^7.0.1" as the dependency in package.json Install react-scripts version 4.0.3: npm install react-scripts#4.0.3 Rebuild node-sass with npm rebuild node-sass Start the application with npm start You could even investigate updating react-scripts to the latest version 5.
How to fix NPM vulnerabilities
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 problem for npm start on a react app
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!
npm install react-native-svg --save fails
Im new to react-native. I want to draw a chart , for that I came across this library. But unfortunately while installing the library from npm npm install react-native-svg --save I'm getting error. npm WARN peerDependencies The peer dependency react-native#^0.24.0 included from react-native-svg will no npm WARN peerDependencies longer be automatically installed to fulfill the peerDependency npm WARN peerDependencies in npm 3+. Your application will need to depend on it explicitly. npm ERR! Darwin 15.2.0 npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "react-native-svg" "--save" npm ERR! node v4.3.1 npm ERR! npm v2.14.12 npm ERR! code EPEERINVALID npm ERR! peerinvalid The package react-native#0.25.1 does not satisfy its siblings' peerDependencies requirements! npm ERR! peerinvalid Peer react-native-svg#1.2.6 wants react-native#^0.24.0 npm ERR! Please include the following file with any support request: npm ERR! /Users/subodh/ReactNative/SVGDemo/npm-debug.log Anybody out there can help regarding this ? Package.json contents : { "name": "SVGDemo", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { "react": "^0.14.8", "react-native": "^0.25.1" } }