create-react-app: npm update fails in CRA app after node-sass
Describe the bug
After the install of node-sass in a newly create CRA app, npm update fails with below error.
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.13.12
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.
npm ERR!
npm ERR! See C:\Users\peter\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\peter\AppData\Local\npm-cache\_logs\2021-03-25T20_42_43_029Z-debug.log
Did you try recovering your dependencies?
Yes, cleared npm cache and setup new project.
Environment
- create-react-app version: 4.0.3
- NPM version: 7.7.4
- Node version: v14.16.0
- Node Process: {
node: '14.16.0',
v8: '8.4.371.19-node.18',
uv: '1.40.0',
zlib: '1.2.11',
brotli: '1.0.9',
ares: '1.16.1',
modules: '83',
nghttp2: '1.41.0',
napi: '7',
llhttp: '2.1.3',
openssl: '1.1.1j',
cldr: '37.0',
icu: '67.1',
tz: '2020a',
unicode: '13.0'
}
- Node Platform: win32
- Node architecture: x64
- node-sass version:
node-sass 5.0.0 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]
- npm node-sass versions:
├── node-sass@5.0.0
└─┬ react-scripts@4.0.3
└─┬ sass-loader@10.1.1
└── node-sass@5.0.0 deduped
Steps to reproduce
- npx create-react-app test3 typescript --use-npm
- npm install node-sass
- npm update
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 2
- Comments: 15
This is an issue in npm version 7+. @petersowa and @SirPryderi. You will need to downgrade your npm versions to the stable 6.14.11
Solution:
npm install npm@6.14.11 -g
Updated to the newest version of NPM and added npm install --save-dev @babel/core. No more update fails with node-sass.
I add in my
composer.json
"@babel/core": "^7.13.14"
For a workaround I switched to yarn.
Brilliant move @petersowa. Yarn is better than npm in numerous things