chore: migrate to @babel/eslint-parser (#10761)

Co-authored-by: Brody McKee <[email protected]>

Author: JLHwung

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',