create-react-app 如果`package.json`中包含`eslint`,则react-scripts 4.0.3在执行npm install时崩溃,

sbtkgmzw  于 22天前  发布在  React
关注(0)|答案(5)|浏览(17)

描述bug

如果在create-react-app项目中包含eslint,npm install会崩溃。
重现步骤:

  1. 安装node 14.14.0 和npm版本 7.7.1
  2. npx create-react-app my-app --template typescript
  3. 添加依赖 "eslint": "7.22.0"package.json
  4. 移除 package-lock.json
  5. 移除 node_modules
  6. npm cache clear --force
  7. 运行 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",这解决了问题。

9rbhqvlz

9rbhqvlz1#

我看到将"@babel/core": "^7.13.0"添加到package.json可以解决这个问题,但是我不想在不直接使用它时添加它。还有其他解决方案吗?我认为必须在react-scripts中进行更改,或者将"@babel/core": "^7.13.0"添加到package.json是唯一的解决方案。

v8wbuo2f

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"是解决此问题的一种合适方法?

s2j5cfk0

s2j5cfk03#

可以轻松地重现如下

  • npx create-react-app my-app
  • npm run eject (这将强制所有“隐藏”的包暴露出来,以便您实际上可以看到发生了什么)

您会得到与@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的原因,我的知识和经验有限。
希望这有所帮助。

okxuctiv

okxuctiv4#

我遇到了相同的问题,有任何ETA可以解决这个问题吗?npm@7已经在两个月前发布了:)

35g0bw71

35g0bw715#

安装最新LTS版本(v14.17.0)的节点解决了我的问题。

相关问题