diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
index 52c5c390880..454c803f672 100644
--- a/packages/eslint-config-react-app/README.md
+++ b/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:
diff --git a/packages/eslint-config-react-app/base.js b/packages/eslint-config-react-app/base.js
index 4b6bcd6f8ef..49bf6c78b92 100644
--- a/packages/eslint-config-react-app/base.js
+++ b/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'],
     },
   },
 
diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json
index 6177cc62dc6..53b38908c43 100644
--- a/packages/eslint-config-react-app/package.json
+++ b/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",
diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index 50f547915f1..094b5b48033 100644
--- a/packages/react-error-overlay/package.json
+++ b/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",
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 5b8235edca1..22e3ad6bd7d 100644
--- a/packages/react-scripts/package.json
+++ b/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",
diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js
index b8190449328..bc0333ab377 100644
--- a/packages/react-scripts/scripts/build.js
+++ b/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(
diff --git a/packages/react-scripts/scripts/utils/verifyPackageTree.js b/packages/react-scripts/scripts/utils/verifyPackageTree.js
index d23d8c54265..d1b6e27e3ba 100644
--- a/packages/react-scripts/scripts/utils/verifyPackageTree.js
+++ b/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',