chore: migrate to @babel/eslint-parser

packages/eslint-config-react-app/README.md

@@ -16,10 +16,10 @@ The easiest way to use this configuration is with [Create React App](https://git
 
 If you want to use this ESLint configuration in a project not built with Create React App, you can install it with the following steps.
 
-First, install this package, ESLint and the necessary plugins.
+First, install this package, ESLint and the necessary plugins. Note that when using npm 7 (or greater) this step is not required, as npm will automatically install peer dependencies.
 
 ```sh
-npm install --save-dev eslint-config-react-app @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-eslint@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8
+npm install --save-dev eslint-config-react-app @babel/eslint-parser@^7.13.0 @typescript-eslint/eslint-plugin@^4.0.0 @typescript-eslint/parser@^4.0.0 babel-preset-react-app@^10.0.0 eslint@^7.5.0 eslint-plugin-flowtype@^5.2.0 eslint-plugin-import@^2.22.0 eslint-plugin-jsx-a11y@^6.3.1 eslint-plugin-react@^7.20.3 eslint-plugin-react-hooks@^4.0.8
 ```
 
 Then create a file named `.eslintrc.json` with following contents in the root folder of your project:

packages/eslint-config-react-app/base.js

@@ -14,7 +14,7 @@
 module.exports = {
  root: true,
 
- parser: 'babel-eslint',
+ parser: '@babel/eslint-parser',
 
  plugins: ['react'],
 
@@ -27,10 +27,10 @@ module.exports = {
  },
 
  parserOptions: {
- ecmaVersion: 2018,
  sourceType: 'module',
- ecmaFeatures: {
- jsx: true,
+ requireConfigFile: false,
+ babelOptions: {
+ presets: ['babel-preset-react-app/prod'],
  },
  },
 

packages/eslint-config-react-app/package.json

@@ -17,9 +17,10 @@
  "jest.js"
  ],
  "peerDependencies": {
+ "@babel/eslint-parser": "^7.13.0",
  "@typescript-eslint/eslint-plugin": "^4.0.0",
  "@typescript-eslint/parser": "^4.0.0",
- "babel-eslint": "^10.0.0",
+ "babel-preset-react-app": "^10.0.0",
  "eslint": "^7.5.0",
  "eslint-plugin-flowtype": "^5.2.0",
  "eslint-plugin-import": "^2.22.0",

packages/react-error-overlay/package.json

@@ -34,10 +34,10 @@
  "lib/index.js"
  ],
  "devDependencies": {
- "@babel/code-frame": "^7.10.4",
- "@babel/core": "^7.12.3",
+ "@babel/code-frame": "7.10.4",
+ "@babel/core": "7.12.3",
+ "@babel/eslint-parser": "^7.13.14",
  "anser": "1.4.10",
- "babel-eslint": "^10.1.0",
  "babel-jest": "^26.6.0",
  "babel-loader": "^8.1.0",
  "babel-preset-react-app": "^10.0.0",

packages/react-scripts/package.json

@@ -28,12 +28,12 @@
  },
  "types": "./lib/react-app.d.ts",
  "dependencies": {
- "@babel/core": "^7.12.3",
+ "@babel/core": "7.12.3",
+ "@babel/eslint-parser": "^7.13.14",
  "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
  "@svgr/webpack": "5.5.0",
  "@typescript-eslint/eslint-plugin": "^4.5.0",
  "@typescript-eslint/parser": "^4.5.0",
- "babel-eslint": "^10.1.0",
  "babel-jest": "^26.6.0",
  "babel-loader": "^8.1.0",
  "babel-plugin-named-asset-import": "^0.3.7",

packages/react-scripts/scripts/build.js

@@ -194,7 +194,9 @@ function build(previousFileSizes) {
  messages.warnings.length
  ) {
  // Ignore sourcemap warnings in CI builds. See #8227 for more info.
- const filteredWarnings = messages.warnings.filter(w => !/Failed to parse source map/.test(w));
+ const filteredWarnings = messages.warnings.filter(
+ w => !/Failed to parse source map/.test(w)
+ );
  if (filteredWarnings.length) {
  console.log(
  chalk.yellow(

packages/react-scripts/scripts/utils/verifyPackageTree.js

@@ -23,6 +23,7 @@ function verifyPackageTree() {
  // These are packages most likely to break in practice.
  // See https://github.com/facebook/create-react-app/issues/1795 for reasons why.
  // I have not included Babel here because plugins typically don't import Babel (so it's not affected).
+ '@babel/eslint-parser',
  'babel-jest',
  'babel-loader',
  'jest',