chore: migrate to @babel/eslint-parser

Author: JLHwung

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

@@ -14,7 +14,7 @@
 module.exports = {
   root: true,
 
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
 
   plugins: ['react'],
 
@@ -29,8 +29,11 @@ module.exports = {
   parserOptions: {
     ecmaVersion: 2018,
     sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
+    requireConfigFile: false,
+    babelOptions: {
+      parserOpts: {
+        plugins: ['jsx'],
+      },
     },
   },
 

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

@@ -17,9 +17,9 @@
     "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",
     "eslint": "^7.5.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.0",

packages/react-scripts/package.json

@@ -29,11 +29,11 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@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/utils/verifyPackageTree.js

@@ -21,7 +21,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',
+    '@babel/eslint-parser',
     'babel-jest',
     'babel-loader',
     'eslint',