描述bug
如果在create-react-app项目中包含eslint,npm install会崩溃。
重现步骤:
- 安装node
14.14.0
和npm版本7.7.1
npx create-react-app my-app --template typescript
- 添加依赖
"eslint": "7.22.0"
到package.json
- 移除
package-lock.json
- 移除
node_modules
npm cache clear --force
- 运行
npm install
结果:
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.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 /Users/jason/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jason/.npm/_logs/2021-03-24T20_18_14_307Z-debug.log
这是package.json文件:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.21",
"@types/node": "^12.20.6",
"@types/react": "^17.0.3",
"@types/react-dom": "^17.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "^4.0.3",
"typescript": "^4.2.3",
"eslint": "^7.22.0",
"web-vitals": "^1.1.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"
]
}
}
不仅仅是eslint触发了这个崩溃。在我的主项目中,我将所有包更改为出现在全新create-react-app安装中的版本。我删除了所有eslint包。其中的一些其他包也会导致这个错误。
更新:我在package.json文件中尝试添加"@babel/core": "^7.13.0"
,这解决了问题。
5条答案
按热度按时间9rbhqvlz1#
我看到将
"@babel/core": "^7.13.0"
添加到package.json可以解决这个问题,但是我不想在不直接使用它时添加它。还有其他解决方案吗?我认为必须在react-scripts中进行更改,或者将"@babel/core": "^7.13.0"
添加到package.json是唯一的解决方案。v8wbuo2f2#
嗯,如果我理解正确的话,解析依赖错误是因为create-react-app在其"packages.json"文件中将"@babel/core"依赖固定为"7.12.3"。
3天前,@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining合并到Babe主分支,这需要"@babel/core"依赖为"7.13.0"或更高版本。
我对create-react-app不太了解,但或许将"@babel/core"依赖放宽到"^7.12.3"是解决此问题的一种合适方法?
s2j5cfk03#
可以轻松地重现如下
您会得到与@jtiscione指出的相同的依赖项中断。从7.12.3到7.13.0的变化
根据:https://nodesource.com/blog/semver-a-primer/
在单个语义版本字符串前加上^字符定义了一个可接受版本的范围,包括指定的所有补丁和次要版本,但不包括下一个版本。因此,“^1.2.3”可以大致扩展为“>=1.2.3 <2.0.0”。
正如@nouvak所指出的,放宽依赖关系将使npm install选择下一个次要版本,并且您不会固定在7.13.0(截至编写本文时@babel/core为7.13.5)
如果您在运行npm outdated之后运行npm run eject(如上所述),您将看到@babel/core用红色标记(截至编写本文时)
(根据npm help outdated,这意味着“有一个新的语义版本要求,所以现在应该更新)
基于这一点,以及@babel/core的更改是次要的,似乎遵循@nouvak的建议是合理的。
我无法找到为什么CRA将@babel/core固定在7.12.3的原因,我的知识和经验有限。
希望这有所帮助。
okxuctiv4#
我遇到了相同的问题,有任何ETA可以解决这个问题吗?npm@7已经在两个月前发布了:)
35g0bw715#
安装最新LTS版本(v14.17.0)的节点解决了我的问题。