diff --git a/.eslintrc.json b/.eslintrc.json
index b642bbc5c14..40029410cce 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,7 +4,8 @@
     "browser": true,
     "commonjs": true,
     "node": true,
-    "es6": true
+    "es6": true,
+    "jest": true
   },
   "parserOptions": {
     "ecmaVersion": 2018
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
new file mode 100644
index 00000000000..1249f20532f
--- /dev/null
+++ b/.github/workflows/integration.yml
@@ -0,0 +1,36 @@
+name: Integration Tests
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  job:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
+        node: ['10', '12', '14']
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+      - name: Cache dependencies
+        id: cache
+        uses: actions/cache@v2
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: ${{ runner.os }}-${{ hashFiles('**/yarn.lock', './yarn.lock') }}
+      - name: Install packages
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn --frozen-lockfile --prefer-offline
+      - name: Run integration tests
+        run: yarn test:integration
diff --git a/azure-pipelines-test-job.yml b/azure-pipelines-test-job.yml
index 116d2f87e23..cd6cc7c67c9 100644
--- a/azure-pipelines-test-job.yml
+++ b/azure-pipelines-test-job.yml
@@ -6,8 +6,8 @@ parameters:
   name: ''
   testScript: ''
   configurations:
-    LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
     LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
+    LinuxNode14: { vmImage: 'ubuntu-16.04', nodeVersion: 14.x }
 
 jobs:
   - job: ${{ parameters.name }}
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index 3c89363208b..32c7a5c166d 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -26,10 +26,10 @@ jobs:
   # ******************************************************************************
   # Installs test suite
   # ******************************************************************************
-  - template: azure-pipelines-test-job.yml
-    parameters:
-      name: Installs
-      testScript: tasks/e2e-installs.sh
+  # - template: azure-pipelines-test-job.yml
+  #   parameters:
+  #     name: Installs
+  #     testScript: tasks/e2e-installs.sh
 
   # ******************************************************************************
   # Kitchensink test suite
@@ -42,25 +42,25 @@ jobs:
   # ******************************************************************************
   # Kitchensink Eject test suite
   # ******************************************************************************
-  - template: azure-pipelines-test-job.yml
-    parameters:
-      name: KitchensinkEject
-      testScript: tasks/e2e-kitchensink-eject.sh
+  # - template: azure-pipelines-test-job.yml
+  #   parameters:
+  #     name: KitchensinkEject
+  #     testScript: tasks/e2e-kitchensink-eject.sh
 
   # ******************************************************************************
   # Behavior test suite
   # ******************************************************************************
-  - template: azure-pipelines-test-job.yml
-    parameters:
-      name: Behavior
-      testScript: tasks/e2e-behavior.sh
-      configurations:
-        LinuxNode10: { vmImage: 'ubuntu-16.04', nodeVersion: 10.x }
-        LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
-        WindowsNode10: { vmImage: 'windows-2019', nodeVersion: 10.x }
-        WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
-        MacNode10: { vmImage: 'macOS-10.15', nodeVersion: 10.x }
-        MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }
+  # - template: azure-pipelines-test-job.yml
+  #   parameters:
+  #     name: Behavior
+  #     testScript: tasks/e2e-behavior.sh
+  #     configurations:
+  #       LinuxNode12: { vmImage: 'ubuntu-16.04', nodeVersion: 12.x }
+  #       LinuxNode14: { vmImage: 'ubuntu-16.04', nodeVersion: 14.x }
+  #       WindowsNode12: { vmImage: 'windows-2019', nodeVersion: 12.x }
+  #       WindowsNode14: { vmImage: 'windows-2019', nodeVersion: 14.x }
+  #       MacNode12: { vmImage: 'macOS-10.15', nodeVersion: 12.x }
+  #       MacNode14: { vmImage: 'macOS-10.15', nodeVersion: 14.x }
 
   # ******************************************************************************
   # Old Node test suite
diff --git a/docusaurus/docs/advanced-configuration.md b/docusaurus/docs/advanced-configuration.md
index 7cc9f14f888..34144ce6040 100644
--- a/docusaurus/docs/advanced-configuration.md
+++ b/docusaurus/docs/advanced-configuration.md
@@ -15,7 +15,7 @@ You can adjust various development and production settings by setting environmen
 | PORT                      |   ✅ Used   | 🚫 Ignored | By default, the development web server will attempt to listen on port 3000 or prompt you to attempt the next available port. You may use this variable to specify a different port.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | HTTPS                     |   ✅ Used   | 🚫 Ignored | When set to `true`, Create React App will run the development server in `https` mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | WDS_SOCKET_HOST           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket hostname for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.hostname` for the SockJS hostname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockhost) for more details.                                                                                                                                                                                                              |
-| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/sockjs-node` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
+| WDS_SOCKET_PATH           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket path for hot module reloading. Normally, `webpack-dev-server` defaults to `/ws` for the SockJS pathname. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockpath) for more details.                                                                                                                                                                                                                              |
 | WDS_SOCKET_PORT           |   ✅ Used   | 🚫 Ignored | When set, Create React App will run the development server with a custom websocket port for hot module reloading. Normally, `webpack-dev-server` defaults to `window.location.port` for the SockJS port. You may use this variable to start local development on more than one Create React App project at a time. See [webpack-dev-server documentation](https://webpack.js.org/configuration/dev-server/#devserversockport) for more details.                                                                                                                                                                                                                          |
 | PUBLIC_URL                |   ✅ Used   |  ✅ Used   | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](deployment#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application.                                                                                                                                                                                                                                     |
 | BUILD_PATH                | 🚫 Ignored  |  ✅ Used   | By default, Create React App will output compiled assets to a `/build` directory adjacent to your `/src`. You may use this variable to specify a new path for Create React App to output assets. BUILD_PATH should be specified as a path relative to the root of your project.                                                                                                                                                                                                                                                                                                                                                                                          |
diff --git a/docusaurus/docs/using-the-public-folder.md b/docusaurus/docs/using-the-public-folder.md
index 71266db6f81..a33c3a29ec8 100644
--- a/docusaurus/docs/using-the-public-folder.md
+++ b/docusaurus/docs/using-the-public-folder.md
@@ -60,7 +60,7 @@ The `public` folder is useful as a workaround for a number of less common cases:
 
 - You need a file with a specific name in the build output, such as [`manifest.webmanifest`](https://developer.mozilla.org/en-US/docs/Web/Manifest).
 - You have thousands of images and need to dynamically reference their paths.
-- You want to include a small script like [`pace.js`](https://github.hubspot.com/pace/docs/welcome/) outside of the bundled code.
+- You want to include a small script like [`pace.js`](https://github.com/CodeByZach/pace) outside of the bundled code.
 - Some libraries may be incompatible with webpack and you have no other option but to include it as a `<script>` tag.
 
 Note that if you add a `<script>` that declares global variables, you should read the topic [Using Global Variables](using-global-variables.md) in the next section which explains how to reference them.
diff --git a/package.json b/package.json
index e7eaac5d085..a5c093bf32e 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "screencast": "node ./tasks/screencast.js",
     "screencast:error": "svg-term --cast jyu19xGl88FQ3poMY8Hbmfw8y --out screencast-error.svg --window --at 12000 --no-cursor",
     "alex": "alex .",
+    "test:integration": "jest test/integration",
     "test": "cd packages/react-scripts && node bin/react-scripts.js test",
     "format": "prettier --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'",
     "compile:lockfile": "node tasks/compile-lockfile.js"
diff --git a/packages/create-react-app/__tests__/getTemplateInstallPackage.test.js b/packages/create-react-app/__tests__/getTemplateInstallPackage.test.js
index bef6106a7e1..5e0f46e028d 100644
--- a/packages/create-react-app/__tests__/getTemplateInstallPackage.test.js
+++ b/packages/create-react-app/__tests__/getTemplateInstallPackage.test.js
@@ -21,9 +21,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('cra-template-typescript gives cra-template-typescript', async () => {
-    await expect(getTemplateInstallPackage('cra-template-typescript')).resolves.toBe(
-      'cra-template-typescript'
-    );
+    await expect(
+      getTemplateInstallPackage('cra-template-typescript')
+    ).resolves.toBe('cra-template-typescript');
   });
 
   it('typescript gives cra-template-typescript', async () => {
@@ -45,9 +45,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('cra-template-typescript@next gives cra-template-typescript@next', async () => {
-    await expect(getTemplateInstallPackage('cra-template-typescript@next')).resolves.toBe(
-      'cra-template-typescript@next'
-    );
+    await expect(
+      getTemplateInstallPackage('cra-template-typescript@next')
+    ).resolves.toBe('cra-template-typescript@next');
   });
 
   it('@iansu gives @iansu/cra-template', async () => {
@@ -69,9 +69,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('@iansu/cra-template-typescript@next gives @iansu/cra-template-typescript@next', async () => {
-    await expect(getTemplateInstallPackage('@iansu/cra-template-typescript@next')).resolves.toBe(
-      '@iansu/cra-template-typescript@next'
-    );
+    await expect(
+      getTemplateInstallPackage('@iansu/cra-template-typescript@next')
+    ).resolves.toBe('@iansu/cra-template-typescript@next');
   });
 
   it('http://example.com/cra-template.tar.gz gives http://example.com/cra-template.tar.gz', async () => {
diff --git a/packages/eslint-config-react-app/README.md b/packages/eslint-config-react-app/README.md
index 700e92aa777..52c5c390880 100644
--- a/packages/eslint-config-react-app/README.md
+++ b/packages/eslint-config-react-app/README.md
@@ -39,7 +39,7 @@ This config also ships with optional Jest rules for ESLint (based on [`eslint-pl
 You'll first need to add the ESLint plugin for Jest (if you don't already have it installed).
 
 ```sh
-npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library&^3.9.0
+npm install --save-dev eslint-plugin-jest@^24.0.0 eslint-plugin-testing-library@^3.9.0
 ```
 
 You can then enable these rules by adding the Jest config to the `extends` array in your ESLint config.
diff --git a/packages/react-dev-utils/ModuleNotFoundPlugin.js b/packages/react-dev-utils/ModuleNotFoundPlugin.js
index 5977707c569..da8eed0186c 100644
--- a/packages/react-dev-utils/ModuleNotFoundPlugin.js
+++ b/packages/react-dev-utils/ModuleNotFoundPlugin.js
@@ -100,14 +100,7 @@ class ModuleNotFoundPlugin {
     const { prettierError } = this;
     compiler.hooks.make.intercept({
       register(tap) {
-        // "SingleEntryPlugin" can be removed when Webpack 4 no longer have to be supported
-        if (
-          !(
-            tap.name === 'MultiEntryPlugin' ||
-            tap.name === 'SingleEntryPlugin' ||
-            tap.name === 'EntryPlugin'
-          )
-        ) {
+        if (!(tap.name === 'MultiEntryPlugin' || tap.name === 'EntryPlugin')) {
           return tap;
         }
         return Object.assign({}, tap, {
diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js
index e84d2b38aab..e2c16ffd819 100644
--- a/packages/react-dev-utils/ModuleScopePlugin.js
+++ b/packages/react-dev-utils/ModuleScopePlugin.js
@@ -15,6 +15,7 @@ class ModuleScopePlugin {
   constructor(appSrc, allowedFiles = []) {
     this.appSrcs = Array.isArray(appSrc) ? appSrc : [appSrc];
     this.allowedFiles = new Set(allowedFiles);
+    this.allowedPaths = [...allowedFiles].map(path.dirname).filter(p => path.relative(p, process.cwd()) !== '');
   }
 
   apply(resolver) {
@@ -53,6 +54,11 @@ class ModuleScopePlugin {
         if (this.allowedFiles.has(requestFullPath)) {
           return callback();
         }
+        if (this.allowedPaths.some((allowedFile) => {
+          return requestFullPath.startsWith(allowedFile);
+        })) {
+          return callback();
+        }
         // Find path from src to the requested file
         // Error if in a parent directory of all given appSrcs
         if (
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 6a6ab28b32f..262b9a51685 100644
--- a/packages/react-dev-utils/README.md
+++ b/packages/react-dev-utils/README.md
@@ -231,11 +231,11 @@ var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 
 var compiler = webpack(config);
 
-compiler.hooks.invalid.tap('invalid', function() {
+compiler.hooks.invalid.tap('invalid', function () {
   console.log('Compiling...');
 });
 
-compiler.hooks.done.tap('done', function(stats) {
+compiler.hooks.done.tap('done', function (stats) {
   var rawMessages = stats.toJson({}, true);
   var messages = formatWebpackMessages(rawMessages);
   if (!messages.errors.length && !messages.warnings.length) {
@@ -338,11 +338,9 @@ The `args` object accepts a number of properties:
 
 - **appName** `string`: The name that will be printed to the terminal.
 - **config** `Object`: The webpack configuration options to be provided to the webpack constructor.
-- **devSocket** `Object`: Required if `useTypeScript` is `true`. This object should include `errors` and `warnings` which are functions accepting an array of errors or warnings emitted by the type checking. This is useful when running `fork-ts-checker-webpack-plugin` with `async: true` to report errors that are emitted after the webpack build is complete.
 - **urls** `Object`: To provide the `urls` argument, use `prepareUrls()` described below.
 - **useYarn** `boolean`: If `true`, yarn instructions will be emitted in the terminal instead of npm.
 - **useTypeScript** `boolean`: If `true`, TypeScript type checking will be enabled. Be sure to provide the `devSocket` argument above if this is set to `true`.
-- **tscCompileOnError** `boolean`: If `true`, errors in TypeScript type checking will not prevent start script from running app, and will not cause build script to exit unsuccessfully. Also downgrades all TypeScript type checking error messages to warning messages.
 - **webpack** `function`: A reference to the webpack constructor.
 
 ##### `prepareProxy(proxySetting: string, appPublicFolder: string, servedPathname: string): Object`
diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js
index 6a56f666aa1..d9eea34701c 100644
--- a/packages/react-dev-utils/WebpackDevServerUtils.js
+++ b/packages/react-dev-utils/WebpackDevServerUtils.js
@@ -17,7 +17,6 @@ const prompts = require('prompts');
 const clearConsole = require('./clearConsole');
 const formatWebpackMessages = require('./formatWebpackMessages');
 const getProcessForPort = require('./getProcessForPort');
-const typescriptFormatter = require('./typescriptFormatter');
 const forkTsCheckerWebpackPlugin = require('./ForkTsCheckerWebpackPlugin');
 
 const isInteractive = process.stdout.isTTY;
@@ -104,11 +103,9 @@ function printInstructions(appName, urls, useYarn) {
 function createCompiler({
   appName,
   config,
-  devSocket,
   urls,
   useYarn,
   useTypeScript,
-  tscCompileOnError,
   webpack,
 }) {
   // "Compiler" is a low-level interface to webpack.
@@ -137,28 +134,16 @@ function createCompiler({
 
   let isFirstCompile = true;
   let tsMessagesPromise;
-  let tsMessagesResolver;
 
   if (useTypeScript) {
-    compiler.hooks.beforeCompile.tap('beforeCompile', () => {
-      tsMessagesPromise = new Promise(resolve => {
-        tsMessagesResolver = msgs => resolve(msgs);
-      });
-    });
-
     forkTsCheckerWebpackPlugin
       .getCompilerHooks(compiler)
-      .receive.tap('afterTypeScriptCheck', (diagnostics, lints) => {
-        const allMsgs = [...diagnostics, ...lints];
-        const format = message =>
-          `${message.file}\n${typescriptFormatter(message, true)}`;
-
-        tsMessagesResolver({
-          errors: allMsgs.filter(msg => msg.severity === 'error').map(format),
-          warnings: allMsgs
-            .filter(msg => msg.severity === 'warning')
-            .map(format),
-        });
+      .waiting.tap('awaitingTypeScriptCheck', () => {
+        console.log(
+          chalk.yellow(
+            'Files successfully emitted, waiting for typecheck results...'
+          )
+        );
       });
   }
 
@@ -180,48 +165,6 @@ function createCompiler({
       errors: true,
     });
 
-    if (useTypeScript && statsData.errors.length === 0) {
-      const delayedMsg = setTimeout(() => {
-        console.log(
-          chalk.yellow(
-            'Files successfully emitted, waiting for typecheck results...'
-          )
-        );
-      }, 100);
-
-      const messages = await tsMessagesPromise;
-      clearTimeout(delayedMsg);
-      if (tscCompileOnError) {
-        statsData.warnings.push(...messages.errors);
-      } else {
-        statsData.errors.push(...messages.errors);
-      }
-      statsData.warnings.push(...messages.warnings);
-
-      // Push errors and warnings into compilation result
-      // to show them after page refresh triggered by user.
-      if (tscCompileOnError) {
-        stats.compilation.warnings.push(...messages.errors);
-      } else {
-        stats.compilation.errors.push(...messages.errors);
-      }
-      stats.compilation.warnings.push(...messages.warnings);
-
-      if (messages.errors.length > 0) {
-        if (tscCompileOnError) {
-          devSocket.warnings(messages.errors);
-        } else {
-          devSocket.errors(messages.errors);
-        }
-      } else if (messages.warnings.length > 0) {
-        devSocket.warnings(messages.warnings);
-      }
-
-      if (isInteractive) {
-        clearConsole();
-      }
-    }
-
     const messages = formatWebpackMessages(statsData);
     const isSuccessful = !messages.errors.length && !messages.warnings.length;
     if (isSuccessful) {
@@ -377,7 +320,7 @@ function prepareProxy(proxy, appPublicFolder, servedPathname) {
   // If proxy is specified, let it handle any request except for
   // files in the public folder and requests to the WebpackDevServer socket endpoint.
   // https://github.com/facebook/create-react-app/issues/6720
-  const sockPath = process.env.WDS_SOCKET_PATH || '/sockjs-node';
+  const sockPath = process.env.WDS_SOCKET_PATH || '/ws';
   const isDefaultSockHost = !process.env.WDS_SOCKET_HOST;
   function mayProxy(pathname) {
     const maybePublicPath = path.resolve(
diff --git a/packages/react-dev-utils/evalSourceMapMiddleware.js b/packages/react-dev-utils/evalSourceMapMiddleware.js
index dee6370f8ee..2e6c9a1c4d4 100644
--- a/packages/react-dev-utils/evalSourceMapMiddleware.js
+++ b/packages/react-dev-utils/evalSourceMapMiddleware.js
@@ -14,7 +14,9 @@ function base64SourceMap(source) {
 }
 
 function getSourceById(server, id) {
-  const module = server._stats.compilation.modules.find(m => m.id == id);
+  const module = Array.from(server._stats.compilation.modules).find(
+    (m) => server._stats.compilation.chunkGraph.getModuleId(m) == id,
+  );
   return module.originalSource();
 }
 
diff --git a/packages/react-dev-utils/formatWebpackMessages.js b/packages/react-dev-utils/formatWebpackMessages.js
index 30e5614c27a..1d0f7c5cdae 100644
--- a/packages/react-dev-utils/formatWebpackMessages.js
+++ b/packages/react-dev-utils/formatWebpackMessages.js
@@ -15,7 +15,19 @@ function isLikelyASyntaxError(message) {
 
 // Cleans up webpack error messages.
 function formatMessage(message) {
-  let lines = message.split('\n');
+  let lines = [];
+
+  if (typeof message === 'string') {
+    lines = message.split('\n');
+  } else if ('message' in message) {
+    lines = message['message'].split('\n');
+  } else if (Array.isArray(message)) {
+    message.forEach(message => {
+      if ('message' in message) {
+        lines = message['message'].split('\n');
+      }
+    });
+  }
 
   // Strip webpack-added headers off errors/warnings
   // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index b9cb6dcb93c..79cd2227587 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -61,11 +61,11 @@
     "escape-string-regexp": "2.0.0",
     "filesize": "6.1.0",
     "find-up": "4.1.0",
-    "fork-ts-checker-webpack-plugin": "4.1.6",
+    "fork-ts-checker-webpack-plugin": "6.0.5",
     "global-modules": "2.0.0",
     "globby": "11.0.1",
     "gzip-size": "5.1.1",
-    "immer": "8.0.1",
+    "immer": "8.0.4",
     "is-root": "2.1.0",
     "loader-utils": "2.0.0",
     "open": "^7.0.2",
diff --git a/packages/react-dev-utils/typescriptFormatter.js b/packages/react-dev-utils/typescriptFormatter.js
deleted file mode 100644
index 1fb1276c6bd..00000000000
--- a/packages/react-dev-utils/typescriptFormatter.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-'use strict';
-
-const os = require('os');
-const codeFrame = require('@babel/code-frame').codeFrameColumns;
-const chalk = require('chalk');
-const fs = require('fs');
-
-const issueOrigins = {
-  typescript: 'TypeScript',
-  internal: 'fork-ts-checker-webpack-plugin',
-};
-
-function formatter(issue) {
-  const { origin, severity, file, line, message, code, character } = issue;
-
-  const colors = new chalk.constructor();
-  const messageColor = severity === 'warning' ? colors.yellow : colors.red;
-  const fileAndNumberColor = colors.bold.cyan;
-
-  const source = file && fs.existsSync(file) && fs.readFileSync(file, 'utf-8');
-  const frame = source
-    ? codeFrame(source, { start: { line: line, column: character } })
-        .split('\n')
-        .map(str => '  ' + str)
-        .join(os.EOL)
-    : '';
-
-  return [
-    messageColor.bold(`${issueOrigins[origin]} ${severity.toLowerCase()} in `) +
-      fileAndNumberColor(`${file}(${line},${character})`) +
-      messageColor(':'),
-    message + '  ' + messageColor.underline(`TS${code}`),
-    '',
-    frame,
-  ].join(os.EOL);
-}
-
-module.exports = formatter;
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index db87aba7d0c..dd87c0a6960 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -63,7 +63,7 @@ var connection = new WebSocket(
     hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
     port: process.env.WDS_SOCKET_PORT || window.location.port,
     // Hardcoded in WebpackDevServer
-    pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
+    pathname: process.env.WDS_SOCKET_PATH || '/ws',
     slashes: true,
   })
 );
diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index 137ceb7f266..102204ddd2c 100644
--- a/packages/react-error-overlay/package.json
+++ b/packages/react-error-overlay/package.json
@@ -34,16 +34,16 @@
     "lib/index.js"
   ],
   "devDependencies": {
-    "@babel/code-frame": "7.10.4",
-    "@babel/core": "7.12.3",
+    "@babel/code-frame": "7.12.13",
+    "@babel/core": "7.14.2",
     "anser": "1.4.10",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.0",
-    "babel-loader": "8.1.0",
+    "babel-loader": "8.2.2",
     "babel-preset-react-app": "^10.0.0",
     "chalk": "2.4.2",
-    "chokidar": "^3.4.3",
-    "cross-env": "7.0.2",
+    "chokidar": "^3.5.1",
+    "cross-env": "7.0.3",
     "eslint": "^7.11.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
@@ -66,8 +66,7 @@
     "rimraf": "^3.0.2",
     "settle-promise": "1.0.0",
     "source-map": "0.5.7",
-    "terser-webpack-plugin": "4.2.3",
-    "webpack": "^4.44.2"
+    "webpack": "^5.37.0"
   },
   "jest": {
     "setupFiles": [
diff --git a/packages/react-error-overlay/webpack.config.js b/packages/react-error-overlay/webpack.config.js
index dce51e0f9e9..82dec77be5b 100644
--- a/packages/react-error-overlay/webpack.config.js
+++ b/packages/react-error-overlay/webpack.config.js
@@ -34,14 +34,14 @@ module.exports = {
     alias: {
       iframeScript$: path.resolve(__dirname, './lib/iframe-bundle.js'),
     },
+    fallback: {
+      fs: false,
+      path: false,
+    },
   },
   optimization: {
     nodeEnv: false,
   },
-  node: {
-    fs: 'empty',
-    process: false,
-  },
   performance: {
     hints: false,
   },
diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js
index 67ba927fc80..f4470a02f63 100644
--- a/packages/react-scripts/config/paths.js
+++ b/packages/react-scripts/config/paths.js
@@ -74,6 +74,8 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
+  appWebpackCache: resolveApp('node_modules/.cache'),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
 };
@@ -97,6 +99,8 @@ module.exports = {
   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
   proxySetup: resolveApp('src/setupProxy.js'),
   appNodeModules: resolveApp('node_modules'),
+  appWebpackCache: resolveApp('node_modules/.cache'),
+  appTsBuildInfoFile: resolveApp('node_modules/.cache/tsconfig.tsbuildinfo'),
   swSrc: resolveModule(resolveApp, 'src/service-worker'),
   publicUrlOrPath,
   // These properties only exist before ejecting:
@@ -133,6 +137,8 @@ if (
     testsSetup: resolveModule(resolveOwn, `${templatePath}/src/setupTests`),
     proxySetup: resolveOwn(`${templatePath}/src/setupProxy.js`),
     appNodeModules: resolveOwn('node_modules'),
+    appWebpackCache: resolveOwn('node_modules/.cache'),
+    appTsBuildInfoFile: resolveOwn('node_modules/.cache/tsconfig.tsbuildinfo'),
     swSrc: resolveModule(resolveOwn, `${templatePath}/src/service-worker`),
     publicUrlOrPath,
     // These properties only exist before ejecting:
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5e5f87f3ce9..5a76510c2d5 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -12,14 +12,12 @@ const fs = require('fs');
 const path = require('path');
 const webpack = require('webpack');
 const resolve = require('resolve');
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const safePostCssParser = require('postcss-safe-parser');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
@@ -32,14 +30,11 @@ const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
-const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 // @remove-on-eject-begin
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 // @remove-on-eject-end
-const postcssNormalize = require('postcss-normalize');
-
-const appPackageJson = require(paths.appPackageJson);
+const createEnvironmentHash = require('./webpack/persistentCache/createEnvironmentHash');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -50,6 +45,11 @@ const webpackDevClientEntry = require.resolve(
 const reactRefreshOverlayEntry = require.resolve(
   'react-dev-utils/refreshOverlayInterop'
 );
+const reactRefreshRuntimeEntry = require.resolve('react-refresh/runtime');
+const reactRefreshWebpackPluginRuntimeEntry = require.resolve(
+  '@pmmmwh/react-refresh-webpack-plugin'
+);
+const babelRuntimeEntry = require.resolve('babel-preset-react-app');
 
 // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 // makes for a smoother build process.
@@ -129,10 +129,13 @@ module.exports = function (webpackEnv) {
         loader: require.resolve('postcss-loader'),
         options: {
           postcssOptions: {
+            // Necessary for external CSS imports to work
+            // https://github.com/facebook/create-react-app/issues/2677
+            ident: 'postcss',
             plugins: [
-              require('postcss-flexbugs-fixes'),
+              'postcss-flexbugs-fixes',
               [
-                require('postcss-preset-env'),
+                'postcss-preset-env',
                 {
                   autoprefixer: {
                     flexbox: 'no-2009',
@@ -143,10 +146,10 @@ module.exports = function (webpackEnv) {
               // Adds PostCSS Normalize as the reset css with default options,
               // so that it honors browserslist config in package.json
               // which in turn let's users customize the target behavior as per their needs.
-              postcssNormalize(),
+              'postcss-normalize',
             ],
           },
-          sourceMap: isEnvProduction && shouldUseSourceMap,
+          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
         },
       },
     ].filter(Boolean);
@@ -171,6 +174,7 @@ module.exports = function (webpackEnv) {
   };
 
   return {
+    target: ['browserslist'],
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
     // Stop compilation early in production
     bail: isEnvProduction,
@@ -208,7 +212,7 @@ module.exports = function (webpackEnv) {
         : paths.appIndexJs,
     output: {
       // The build folder.
-      path: isEnvProduction ? paths.appBuild : undefined,
+      path: paths.appBuild,
       // Add /* filename */ comments to generated require()s in the output.
       pathinfo: isEnvDevelopment,
       // There will be one main bundle, and one file per asynchronous chunk.
@@ -216,12 +220,11 @@ module.exports = function (webpackEnv) {
       filename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].js'
         : isEnvDevelopment && 'static/js/bundle.js',
-      // TODO: remove this when upgrading to webpack 5
-      futureEmitAssets: true,
       // There are also additional JS chunk files if you use code splitting.
       chunkFilename: isEnvProduction
         ? 'static/js/[name].[contenthash:8].chunk.js'
         : isEnvDevelopment && 'static/js/[name].chunk.js',
+      assetModuleFilename: 'static/media/[name].[hash][ext]',
       // webpack uses `publicPath` to determine where the app is being served from.
       // It requires a trailing slash, or the file assets will get an incorrect path.
       // We inferred the "public path" (such as / or /my-project) from homepage.
@@ -234,12 +237,22 @@ module.exports = function (webpackEnv) {
               .replace(/\\/g, '/')
         : isEnvDevelopment &&
           (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
-      // Prevents conflicts when multiple webpack runtimes (from different apps)
-      // are used on the same page.
-      jsonpFunction: `webpackJsonp${appPackageJson.name}`,
-      // this defaults to 'window', but by setting it to 'this' then
-      // module chunks which are built will work in web workers as well.
-      globalObject: 'this',
+    },
+    cache: {
+      type: 'filesystem',
+      version: createEnvironmentHash(env.raw),
+      cacheDirectory: paths.appWebpackCache,
+      store: 'pack',
+      buildDependencies: {
+        defaultWebpack: ['webpack/lib/'],
+        config: [__filename],
+        tsconfig: [paths.appTsConfig, paths.appJsConfig].filter(f =>
+          fs.existsSync(f)
+        ),
+      },
+    },
+    infrastructureLogging: {
+      level: 'none',
     },
     optimization: {
       minimize: isEnvProduction,
@@ -283,41 +296,10 @@ module.exports = function (webpackEnv) {
               ascii_only: true,
             },
           },
-          sourceMap: shouldUseSourceMap,
         }),
         // This is only used in production mode
-        new OptimizeCSSAssetsPlugin({
-          cssProcessorOptions: {
-            parser: safePostCssParser,
-            map: shouldUseSourceMap
-              ? {
-                  // `inline: false` forces the sourcemap to be output into a
-                  // separate file
-                  inline: false,
-                  // `annotation: true` appends the sourceMappingURL to the end of
-                  // the css file, helping the browser find the sourcemap
-                  annotation: true,
-                }
-              : false,
-          },
-          cssProcessorPluginOptions: {
-            preset: ['default', { minifyFontValues: { removeQuotes: false } }],
-          },
-        }),
+        new CssMinimizerPlugin(),
       ],
-      // Automatically split vendor and commons
-      // https://twitter.com/wSokra/status/969633336732905474
-      // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
-      splitChunks: {
-        chunks: 'all',
-        name: isEnvDevelopment,
-      },
-      // Keep the runtime chunk separated to enable long term caching
-      // https://twitter.com/wSokra/status/969679223278505985
-      // https://github.com/facebook/create-react-app/issues/5358
-      runtimeChunk: {
-        name: entrypoint => `runtime-${entrypoint.name}`,
-      },
     },
     resolve: {
       // This allows you to set a fallback for where webpack should look for modules.
@@ -348,9 +330,6 @@ module.exports = function (webpackEnv) {
         ...(modules.webpackAliases || {}),
       },
       plugins: [
-        // Adds support for installing with Plug'n'Play, leading to faster installs and adding
-        // guards against forgotten dependencies and such.
-        PnpWebpackPlugin,
         // Prevents users from importing files from outside of src/ (or node_modules/).
         // This often causes confusion because we only process files within src/ with babel.
         // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
@@ -358,22 +337,16 @@ module.exports = function (webpackEnv) {
         // Make sure your source files are compiled, as they will not be processed in any way.
         new ModuleScopePlugin(paths.appSrc, [
           paths.appPackageJson,
+          reactRefreshRuntimeEntry,
+          reactRefreshWebpackPluginRuntimeEntry,
           reactRefreshOverlayEntry,
+          babelRuntimeEntry,
         ]),
       ],
     },
-    resolveLoader: {
-      plugins: [
-        // Also related to Plug'n'Play, but this time it tells webpack to load its loaders
-        // from the current package.
-        PnpWebpackPlugin.moduleLoader(module),
-      ],
-    },
     module: {
       strictExportPresence: true,
       rules: [
-        // Disable require.ensure as it's not a standard language feature.
-        { parser: { requireEnsure: false } },
         {
           // "oneOf" will traverse all following loaders until one will
           // match the requirements. When no loader matches it will fall
@@ -383,11 +356,12 @@ module.exports = function (webpackEnv) {
             // https://github.com/jshttp/mime-db
             {
               test: [/\.avif$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                mimetype: 'image/avif',
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset',
+              mimetype: 'image/avif',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
               },
             },
             // "url" loader works like "file" loader except that it embeds assets
@@ -395,10 +369,37 @@ module.exports = function (webpackEnv) {
             // A missing `test` is equivalent to a match.
             {
               test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-              loader: require.resolve('url-loader'),
-              options: {
-                limit: imageInlineSizeLimit,
-                name: 'static/media/[name].[hash:8].[ext]',
+              type: 'asset',
+              parser: {
+                dataUrlCondition: {
+                  maxSize: imageInlineSizeLimit,
+                },
+              },
+            },
+            {
+              test: /\.svg$/,
+              use: [
+                {
+                  loader: '@svgr/webpack',
+                  options: {
+                    prettier: false,
+                    svgo: false,
+                    svgoConfig: {
+                      plugins: [{ removeViewBox: false }],
+                    },
+                    titleProp: true,
+                    ref: true,
+                  },
+                },
+                {
+                  loader: 'file-loader',
+                  options: {
+                    name: 'static/media/[name].[hash].[ext]',
+                  },
+                },
+              ],
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
               },
             },
             // Process application JS with Babel.
@@ -440,17 +441,6 @@ module.exports = function (webpackEnv) {
                 ),
                 // @remove-on-eject-end
                 plugins: [
-                  [
-                    require.resolve('babel-plugin-named-asset-import'),
-                    {
-                      loaderMap: {
-                        svg: {
-                          ReactComponent:
-                            '@svgr/webpack?-svgo,+titleProp,+ref![path]',
-                        },
-                      },
-                    },
-                  ],
                   isEnvDevelopment &&
                     shouldUseReactRefresh &&
                     require.resolve('react-refresh/babel'),
@@ -591,15 +581,12 @@ module.exports = function (webpackEnv) {
             // This loader doesn't use a "test" so it will catch all modules
             // that fall through the other loaders.
             {
-              loader: require.resolve('file-loader'),
               // Exclude `js` files to keep "css" loader working as it injects
               // its runtime that would otherwise be processed through "file" loader.
               // Also exclude `html` and `json` extensions so they get processed
               // by webpacks internal loaders.
               exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
-              options: {
-                name: 'static/media/[name].[hash:8].[ext]',
-              },
+              type: 'asset/resource',
             },
             // ** STOP ** Are you adding a new loader?
             // Make sure to add the new loader(s) before the "file" loader.
@@ -718,7 +705,10 @@ module.exports = function (webpackEnv) {
       // solution that requires the user to opt into importing specific locales.
       // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
       // You can remove this if you don't use Moment.js:
-      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+      new webpack.IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
       // Generate a service worker script that will precache, and keep up to date,
       // the HTML & assets that are part of the webpack build.
       isEnvProduction &&
@@ -735,33 +725,50 @@ module.exports = function (webpackEnv) {
       // TypeScript type checking
       useTypeScript &&
         new ForkTsCheckerWebpackPlugin({
-          typescript: resolve.sync('typescript', {
-            basedir: paths.appNodeModules,
-          }),
           async: isEnvDevelopment,
-          checkSyntacticErrors: true,
-          resolveModuleNameModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          resolveTypeReferenceDirectiveModule: process.versions.pnp
-            ? `${__dirname}/pnpTs.js`
-            : undefined,
-          tsconfig: paths.appTsConfig,
-          reportFiles: [
+          typescript: {
+            typescriptPath: resolve.sync('typescript', {
+              basedir: paths.appNodeModules,
+            }),
+            configOverwrite: {
+              compilerOptions: {
+                sourceMap: isEnvProduction
+                  ? shouldUseSourceMap
+                  : isEnvDevelopment,
+                skipLibCheck: true,
+                inlineSourceMap: false,
+                declarationMap: false,
+                noEmit: true,
+                incremental: true,
+                tsBuildInfoFile: paths.appTsBuildInfoFile,
+              },
+            },
+            context: paths.appPath,
+            diagnosticOptions: {
+              syntactic: true,
+            },
+            mode: 'write-references',
+            // profile: true,
+          },
+          issue: {
             // This one is specifically to match during CI tests,
             // as micromatch doesn't match
             // '../cra-template-typescript/template/src/App.tsx'
             // otherwise.
-            '../**/src/**/*.{ts,tsx}',
-            '**/src/**/*.{ts,tsx}',
-            '!**/src/**/__tests__/**',
-            '!**/src/**/?(*.)(spec|test).*',
-            '!**/src/setupProxy.*',
-            '!**/src/setupTests.*',
-          ],
-          silent: true,
-          // The formatter is invoked directly in WebpackDevServerUtils during development
-          formatter: isEnvProduction ? typescriptFormatter : undefined,
+            include: [
+              { file: '../**/src/**/*.{ts,tsx}' },
+              { file: '**/src/**/*.{ts,tsx}' },
+            ],
+            exclude: [
+              { file: '**/src/**/__tests__/**' },
+              { file: '**/src/**/?(*.){spec|test}.*' },
+              { file: '**/src/setupProxy.*' },
+              { file: '**/src/setupTests.*' },
+            ],
+          },
+          logger: {
+            infrastructure: 'silent',
+          },
         }),
       !disableESLintPlugin &&
         new ESLintPlugin({
@@ -789,18 +796,6 @@ module.exports = function (webpackEnv) {
           },
         }),
     ].filter(Boolean),
-    // Some libraries import Node modules but don't use them in the browser.
-    // Tell webpack to provide empty mocks for them so importing them works.
-    node: {
-      module: 'empty',
-      dgram: 'empty',
-      dns: 'mock',
-      fs: 'empty',
-      http2: 'empty',
-      net: 'empty',
-      tls: 'empty',
-      child_process: 'empty',
-    },
     // Turn off performance processing because we utilize
     // our own hints via the FileSizeReporter
     performance: false,
diff --git a/packages/react-scripts/config/webpack/persistentCache/createEnvironmentHash.js b/packages/react-scripts/config/webpack/persistentCache/createEnvironmentHash.js
new file mode 100644
index 00000000000..c59bb793ff6
--- /dev/null
+++ b/packages/react-scripts/config/webpack/persistentCache/createEnvironmentHash.js
@@ -0,0 +1,9 @@
+'use strict';
+const { createHash } = require('crypto');
+
+module.exports = env => {
+  const hash = createHash('md4');
+  hash.update(JSON.stringify(env));
+
+  return hash.digest('hex');
+};
diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js
index bf8c98d0d91..65cf8d91eba 100644
--- a/packages/react-scripts/config/webpackDevServer.config.js
+++ b/packages/react-scripts/config/webpackDevServer.config.js
@@ -19,10 +19,12 @@ const getHttpsConfig = require('./getHttpsConfig');
 
 const host = process.env.HOST || '0.0.0.0';
 const sockHost = process.env.WDS_SOCKET_HOST;
-const sockPath = process.env.WDS_SOCKET_PATH; // default: '/sockjs-node'
+const sockPath = process.env.WDS_SOCKET_PATH; // default: '/ws'
 const sockPort = process.env.WDS_SOCKET_PORT;
 
 module.exports = function (proxy, allowedHost) {
+  const disableFirewall =
+    !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true';
   return {
     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
     // websites from potentially accessing local content through DNS rebinding:
@@ -40,77 +42,69 @@ module.exports = function (proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
+    // Note: ["localhost", ".localhost"] will support subdomains - but we might
+    // want to allow setting the allowedHosts manually for more complex setups
+    firewall: disableFirewall ? false : [allowedHost],
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    contentBasePublicPath: paths.publicUrlOrPath,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide WDS_SOCKET_PATH endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // Use 'ws' instead of 'sockjs-node' on server since we're using native
-    // websockets in `webpackHotDevClient`.
-    transportMode: 'ws',
-    // Prevent a WS client from getting injected as we're already including
-    // `webpackHotDevClient`.
-    injectClient: false,
-    // Enable custom sockjs pathname for websocket connection to hot reloading server.
-    // Enable custom sockjs hostname, pathname and port for websocket connection
-    // to hot reloading server.
-    sockHost,
-    sockPath,
-    sockPort,
-    // It is important to tell WebpackDevServer to use the same "publicPath" path as
-    // we specified in the webpack config. When homepage is '.', default to serving
-    // from the root.
-    // remove last slash so user can land on `/test` instead of `/test/`
-    publicPath: paths.publicUrlOrPath.slice(0, -1),
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
+    static: {
+      // By default WebpackDevServer serves physical files from current directory
+      // in addition to all the virtual build products that it serves from memory.
+      // This is confusing because those files won’t automatically be available in
+      // production build folder unless we copy them. However, copying the whole
+      // project directory is dangerous because we may expose sensitive files.
+      // Instead, we establish a convention that only files in `public` directory
+      // get served. Our build script will copy `public` into the `build` folder.
+      // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
+      // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
+      // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
+      // Note that we only recommend to use `public` folder as an escape hatch
+      // for files like `favicon.ico`, `manifest.json`, and libraries that are
+      // for some reason broken when imported through webpack. If you just want to
+      // use an image, put it in `src` and `import` it from JavaScript instead.
+      directory: paths.appPublic,
+      publicPath: [paths.publicUrlOrPath],
+      // By default files from `contentBase` will not trigger a page reload.
+      watch: {
+        // Reportedly, this avoids CPU overload on some systems.
+        // https://github.com/facebook/create-react-app/issues/293
+        // src/node_modules is not ignored to support absolute imports
+        // https://github.com/facebook/create-react-app/issues/1065
+        ignored: ignoredFiles(paths.appSrc),
+      },
     },
+    client: {
+      // Enable custom sockjs pathname for websocket connection to hot reloading server.
+      // Enable custom sockjs hostname, pathname and port for websocket connection
+      // to hot reloading server.
+      host: sockHost,
+      path: sockPath,
+      port: sockPort,
+      overlay: false,
+      needClientEntry: false,
+      // Prevent a WS client from getting injected as we're already including
+      // `webpackHotDevClient`.
+      needHotEntry: false,
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "publicPath" path as
+      // we specified in the webpack config. When homepage is '.', default to serving
+      // from the root.
+      // remove last slash so user can land on `/test` instead of `/test/`
+      publicPath: paths.publicUrlOrPath.slice(0, -1),
+    },
+
     https: getHttpsConfig(),
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
       index: paths.publicUrlOrPath,
     },
-    public: allowedHost,
     // `proxy` is run between `before` and `after` `webpack-dev-server` hooks
     proxy,
-    before(app, server) {
+    onBeforeSetupMiddleware(app, server) {
       // Keep `evalSourceMapMiddleware` and `errorOverlayMiddleware`
       // middlewares before `redirectServedPath` otherwise will not have any effect
       // This lets us fetch source contents from webpack for the error overlay
@@ -123,7 +117,7 @@ module.exports = function (proxy, allowedHost) {
         require(paths.proxySetup)(app);
       }
     },
-    after(app) {
+    onAfterSetupMiddleware(app) {
       // Redirect to `PUBLIC_URL` or `homepage` from `package.json` if url not match
       app.use(redirectServedPath(paths.publicUrlOrPath));
 
diff --git a/packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js
index fcb61f50ec9..7c56bdceee5 100644
--- a/packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js
+++ b/packages/react-scripts/fixtures/kitchensink/template/integration/webpack.test.js
@@ -93,8 +93,9 @@ describe('Integration', () => {
     it('no ext inclusion', async () => {
       doc = await initDOM('no-ext-inclusion');
 
-      expect(doc.getElementById('feature-no-ext-inclusion').href).toMatch(
-        /\/static\/media\/aFileWithoutExt\.[a-f0-9]{8}\.bin$/
+      // Webpack 4 added a default extension ".bin" seems like webpack 5 asset modules do not
+      expect(doc.getElementById('feature-no-ext-inclusion').getAttribute('href')).toMatch(
+        /\/static\/media\/aFileWithoutExt\.[a-f0-9]+$/
       );
     });
 
@@ -135,8 +136,8 @@ describe('Integration', () => {
     it('unknown ext inclusion', async () => {
       doc = await initDOM('unknown-ext-inclusion');
 
-      expect(doc.getElementById('feature-unknown-ext-inclusion').href).toMatch(
-        /\/static\/media\/aFileWithExt\.[a-f0-9]{8}\.unknown$/
+      expect(doc.getElementById('feature-unknown-ext-inclusion').getAttribute('href')).toMatch(
+        /\/static\/media\/aFileWithExt\.[a-f0-9]+\.unknown$/
       );
     });
   });
diff --git a/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js b/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js
index 97f782f515c..a67fdebf015 100644
--- a/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js
+++ b/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/JsonInclusion.js
@@ -6,7 +6,9 @@
  */
 
 import React from 'react';
-import { abstract } from './assets/abstract.json';
+import abstractJson from './assets/abstract.json';
+
+const { abstract } = abstractJson;
 
 const JsonInclusion = () => (
   <summary id="feature-json-inclusion">{abstract}</summary>
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 29cfe9b8984..e5d41fdb5c9 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -28,21 +28,23 @@
   },
   "types": "./lib/react-app.d.ts",
   "dependencies": {
-    "@babel/core": "7.12.3",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.4.3",
+    "@babel/core": "7.14.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-beta.8",
     "@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-loader": "8.2.2",
     "babel-plugin-named-asset-import": "^0.3.7",
     "babel-preset-react-app": "^10.0.0",
     "bfj": "^7.0.2",
-    "camelcase": "^6.1.0",
-    "case-sensitive-paths-webpack-plugin": "2.3.0",
-    "css-loader": "4.3.0",
-    "dotenv": "8.2.0",
+    "browserslist": "^4.16.6",
+    "camelcase": "^6.2.0",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "css-loader": "5.2.4",
+    "css-minimizer-webpack-plugin": "3.0.0",
+    "dotenv": "9.0.2",
     "dotenv-expand": "5.1.0",
     "eslint": "^7.11.0",
     "eslint-config-react-app": "^6.0.0",
@@ -54,39 +56,34 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.9.2",
     "eslint-webpack-plugin": "^2.5.2",
-    "file-loader": "6.1.1",
-    "fs-extra": "^9.0.1",
-    "html-webpack-plugin": "4.5.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.0.0",
+    "html-webpack-plugin": "5.3.1",
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.0",
     "jest-circus": "26.6.0",
     "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
-    "mini-css-extract-plugin": "0.11.3",
-    "optimize-css-assets-webpack-plugin": "5.0.4",
-    "pnp-webpack-plugin": "1.6.4",
-    "postcss": "8.2.4",
+    "mini-css-extract-plugin": "1.6.0",
+    "postcss": "8.2.15",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "4.2.0",
-    "postcss-normalize": "9.0.0",
+    "postcss-loader": "5.3.0",
+    "postcss-normalize": "10.0.0",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "5.0.2",
-    "prompts": "2.4.0",
+    "prompts": "2.4.1",
     "react-app-polyfill": "^2.0.0",
-    "react-dev-utils": "^11.0.3",
-    "react-refresh": "^0.8.3",
-    "resolve": "1.18.1",
-    "resolve-url-loader": "^3.1.2",
-    "sass-loader": "^10.0.5",
-    "semver": "7.3.2",
-    "style-loader": "1.3.0",
-    "terser-webpack-plugin": "4.2.3",
+    "react-dev-utils": "^11.0.4",
+    "react-refresh": "^0.10.0",
+    "resolve": "1.20.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass-loader": "^11.1.1",
+    "semver": "7.3.5",
+    "style-loader": "2.0.0",
     "ts-pnp": "1.2.0",
-    "url-loader": "4.1.1",
-    "webpack": "4.44.2",
-    "webpack-dev-server": "3.11.1",
-    "webpack-manifest-plugin": "3.0.0",
-    "workbox-webpack-plugin": "5.1.4"
+    "webpack": "5.37.0",
+    "webpack-dev-server": "4.0.0-beta.3",
+    "webpack-manifest-plugin": "3.1.1",
+    "workbox-webpack-plugin": "6.1.5"
   },
   "devDependencies": {
     "react": "^17.0.1",
diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js
index 0972d33384a..e39907f01d7 100644
--- a/packages/react-scripts/scripts/eject.js
+++ b/packages/react-scripts/scripts/eject.js
@@ -109,7 +109,7 @@ prompts({
     }
   }
 
-  const folders = ['config', 'config/jest', 'scripts'];
+  const folders = ['config', 'config/jest', 'scripts', 'config/webpack/persistentCache'];
 
   // Make shallow array of files paths
   const files = folders.reduce((files, folder) => {
@@ -138,7 +138,7 @@ prompts({
   console.log(cyan(`Copying files into ${appPath}`));
 
   folders.forEach(folder => {
-    fs.mkdirSync(path.join(appPath, folder));
+    fs.mkdirSync(path.join(appPath, folder), {recursive: true});
   });
 
   files.forEach(file => {
diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js
index ffbb15d1204..7bf39b4ae8a 100644
--- a/packages/react-scripts/scripts/start.js
+++ b/packages/react-scripts/scripts/start.js
@@ -101,28 +101,19 @@ checkBrowsers(paths.appPath, isInteractive)
     const appName = require(paths.appPackageJson).name;
 
     const useTypeScript = fs.existsSync(paths.appTsConfig);
-    const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
     const urls = prepareUrls(
       protocol,
       HOST,
       port,
       paths.publicUrlOrPath.slice(0, -1)
     );
-    const devSocket = {
-      warnings: warnings =>
-        devServer.sockWrite(devServer.sockets, 'warnings', warnings),
-      errors: errors =>
-        devServer.sockWrite(devServer.sockets, 'errors', errors),
-    };
     // Create a webpack compiler that is configured with custom messages.
     const compiler = createCompiler({
       appName,
       config,
-      devSocket,
       urls,
       useYarn,
       useTypeScript,
-      tscCompileOnError,
       webpack,
     });
     // Load proxy config
diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 949f34ab7d2..cdc2d77a880 100644
--- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -218,7 +218,7 @@ function verifyTypeScriptSetup() {
   if (appTsConfig.compilerOptions == null) {
     appTsConfig.compilerOptions = {};
     firstTimeSetup = true;
-  } 
+  }
 
   for (const option of Object.keys(compilerOptions)) {
     const { parsedValue, value, suggested, reason } = compilerOptions[option];
diff --git a/test/integration/create-react-app/index.test.js b/test/integration/create-react-app/index.test.js
new file mode 100644
index 00000000000..875fd8ca348
--- /dev/null
+++ b/test/integration/create-react-app/index.test.js
@@ -0,0 +1,90 @@
+'use strict';
+
+const execa = require('execa');
+const { mkdirp, remove, writeFileSync } = require('fs-extra');
+const { join } = require('path');
+
+const cli = require.resolve('create-react-app/index.js');
+
+jest.setTimeout(1000 * 60 * 5);
+
+const projectName = 'test-app';
+const genPath = join(__dirname, projectName);
+
+const generatedFiles = ['.gitignore', 'package.json', 'src', 'yarn.lock'];
+
+beforeEach(() => remove(genPath));
+afterAll(() => remove(genPath));
+
+const run = (args, options) => execa('node', [cli].concat(args), options);
+
+describe('create-react-app', () => {
+  it('asks to supply an argument if none supplied', async () => {
+    const { stderr } = await run([], { reject: false });
+    expect(stderr).toContain('Please specify the project directory');
+  });
+
+  it('creates a project on supplying a name as the argument', async () => {
+    await run([projectName], { cwd: __dirname });
+
+    // Assert for the generated files
+    generatedFiles.forEach(file => expect(join(genPath, file)).toBeTruthy());
+  });
+
+  it('warns about conflicting files in path', async () => {
+    // Create the temporary directory
+    await mkdirp(genPath);
+
+    // Create a package.json file
+    const pkgJson = join(genPath, 'package.json');
+    writeFileSync(pkgJson, '{ "foo": "bar" }');
+
+    const { stdout } = await run([projectName], {
+      cwd: __dirname,
+      reject: false,
+    });
+
+    // Assert for the expected message
+    expect(stdout).toContain(
+      `The directory ${projectName} contains files that could conflict`
+    );
+  });
+
+  it('creates a project in the current directory', async () => {
+    // Create temporary directory
+    await mkdirp(genPath);
+
+    // Create a project in the current directory
+    await run(['.'], { cwd: genPath });
+
+    // Assert for the generated files
+    generatedFiles.forEach(file => expect(join(genPath, file)).toBeTruthy());
+  });
+
+  it('uses npm as the package manager', async () => {
+    await run([projectName, '--use-npm'], {
+      cwd: __dirname,
+    });
+
+    // Assert for the generated files
+    const generatedFilesWithNpm = [
+      ...generatedFiles.filter(file => file !== 'yarn.lock'),
+      'package-lock.json',
+    ];
+
+    generatedFilesWithNpm.forEach(file =>
+      expect(join(genPath, file)).toBeTruthy()
+    );
+  });
+
+  it('creates a project based on the typescript template', async () => {
+    await run([projectName, '--template', 'typescript'], {
+      cwd: __dirname,
+    });
+
+    // Assert for the generated files
+    [...generatedFiles, 'tsconfig.json'].forEach(file =>
+      expect(join(genPath, file)).toBeTruthy()
+    );
+  });
+});