react-scripts 4.0.3 crashes during npm install if package.json includes eslint

Describe the bug

If eslint is included in a create-react-app project, npm install crashes.

Steps to reproduce:

1. Install node 14.14.0 and npm version 7.7.1
2. npx create-react-app my-app --template typescript
3. Add dependency "eslint": "7.22.0" to package.json
4. Remove package-lock.json
5. Remove node_modules
6. npm cache clear --force
7. Run npm install

Result:

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

This is 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"
    ]
  }
}

It isn’t just eslint that triggers this crash. In my main project, I’ve changed all packages to the versions that appear in a fresh create-react-app install. I removed all eslint packages. Some other package in there is also causing this error.

UPDATE: I tried adding "@babel/core": "^7.13.0" in the package.json file and that fixes the problem.

[JoakimTeixeira]

Installing the most recent node LTS version (v14.17.0) solved the problem for me.

[nouvak]

Humm, if I see things correctly, the resolving dependency error occurs because create-react-app has the “@babel/core”: dependency fixed to “7.12.3” in its “packages.json” file. 3 days ago, @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining was merged to Babe master branch that requires “@babel/core” dependency to be “7.13.0” or greater. I don’t know create-react-app too well, but would perhaps relaxing the “@babel/core” dependency to “^7.12.3” be a proper way to fix this issue?