From dc28fe12c428b80fc95386530f1f212227968c64 Mon Sep 17 00:00:00 2001
From: Evan Bacon <baconbrix@gmail.com>
Date: Sat, 13 Apr 2019 02:44:28 -0700
Subject: [PATCH 1/4] Prevent the use of react-native internals in web.

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index a41d60e69bc..52fe15d4ea3 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -284,7 +284,7 @@ module.exports = function(webpackEnv) {
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native': 'react-native-web',
+        'react-native$': 'react-native-web',
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding

From f4ef3fc56578be9376886c03727ffb31ef8586db Mon Sep 17 00:00:00 2001
From: Evan Bacon <baconbrix@gmail.com>
Date: Tue, 16 Apr 2019 14:45:28 -0700
Subject: [PATCH 2/4] Added ^ to perform exact match.

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 52fe15d4ea3..3aec9e0e0de 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -284,7 +284,7 @@ module.exports = function(webpackEnv) {
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        'react-native$': 'react-native-web',
+        '^react-native$': 'react-native-web',
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding

From 870aba8b8b32f1b8ac22c234e72d672f254984c3 Mon Sep 17 00:00:00 2001
From: Evan Bacon <baconbrix@gmail.com>
Date: Tue, 16 Apr 2019 15:27:54 -0700
Subject: [PATCH 3/4] Removed unsupported `^` from alias matcher

---
 packages/react-scripts/config/webpack.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 3aec9e0e0de..52fe15d4ea3 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/packages/react-scripts/config/webpack.config.js
@@ -284,7 +284,7 @@ module.exports = function(webpackEnv) {
       alias: {
         // Support React Native Web
         // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-        '^react-native$': 'react-native-web',
+        'react-native$': 'react-native-web',
       },
       plugins: [
         // Adds support for installing with Plug'n'Play, leading to faster installs and adding

From 5398528fc2f7e0d2c6d37b2bdd9a407dda4d7686 Mon Sep 17 00:00:00 2001
From: Evan Bacon <baconbrix@gmail.com>
Date: Mon, 16 Nov 2020 21:17:34 +0100
Subject: [PATCH 4/4] revert changes

---
 CHANGELOG-1.x.md                              |  4 +++-
 CHANGELOG-2.x.md                              |  8 +++----
 README.md                                     |  2 +-
 docusaurus/docs/loading-graphql-files.md      |  2 +-
 .../proxying-api-requests-in-development.md   |  4 ++--
 docusaurus/website/src/pages/index.js         |  5 +++-
 .../getTemplateInstallPackage.test.js         | 24 +++++++++----------
 packages/react-dev-utils/README.md            |  4 ++--
 .../features/webpack/assets/scss-styles.scss  | 16 ++++++-------
 packages/react-scripts/lib/react-app.d.ts     | 10 ++++----
 .../scripts/utils/verifyTypeScriptSetup.js    |  4 +---
 test/fixtures/__shared__/util/scripts.js      |  9 ++++++-
 .../src/index.scss                            |  6 ++---
 test/fixtures/typescript-advanced/src/App.tsx |  8 +++----
 test/fixtures/typescript/src/App.ts           |  2 +-
 15 files changed, 59 insertions(+), 49 deletions(-)

diff --git a/CHANGELOG-1.x.md b/CHANGELOG-1.x.md
index 21eab4b2618..d8b8ee9cb90 100644
--- a/CHANGELOG-1.x.md
+++ b/CHANGELOG-1.x.md
@@ -1588,7 +1588,9 @@ After the regular update procedure above, add these line to `<head>` in `public/
 Add `<noscript>` to `<body>` in `public/index.html`:
 
 ```html
-<noscript> You need to enable JavaScript to run this app. </noscript>
+<noscript>
+  You need to enable JavaScript to run this app.
+</noscript>
 ```
 
 Then create a file called `public/manifest.json` that looks like this:
diff --git a/CHANGELOG-2.x.md b/CHANGELOG-2.x.md
index 38f31ddabb6..5080171a165 100644
--- a/CHANGELOG-2.x.md
+++ b/CHANGELOG-2.x.md
@@ -845,7 +845,7 @@ We previously allowed code splitting with a webpack-specific directive, `require
 **Single Module**
 
 ```js
-require.ensure(['module-a'], function () {
+require.ensure(['module-a'], function() {
   var a = require('module-a');
   // ...
 });
@@ -859,7 +859,7 @@ import('module-a').then(a => {
 **Multiple Module**
 
 ```js
-require.ensure(['module-a', 'module-b'], function () {
+require.ensure(['module-a', 'module-b'], function() {
   var a = require('module-a');
   var b = require('module-b');
   // ...
@@ -913,7 +913,7 @@ Next, create `src/setupProxy.js` and place the following contents in it:
 ```js
 const proxy = require('http-proxy-middleware');
 
-module.exports = function (app) {
+module.exports = function(app) {
   // ...
 };
 ```
@@ -936,7 +936,7 @@ Place entries into `src/setupProxy.js` like so:
 ```js
 const proxy = require('http-proxy-middleware');
 
-module.exports = function (app) {
+module.exports = function(app) {
   app.use(proxy('/api', { target: 'http://localhost:5000/' }));
   app.use(proxy('/*.svg', { target: 'http://localhost:5000/' }));
 };
diff --git a/README.md b/README.md
index b01f4fe5e48..4343c5ef13d 100644
--- a/README.md
+++ b/README.md
@@ -217,4 +217,4 @@ We are grateful to the authors of existing related projects for their ideas and
 
 ## License
 
-Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). The Create React App logo is licensed under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/).
+Create React App is open source software [licensed as MIT](https://github.com/facebook/create-react-app/blob/master/LICENSE). The Create React App logo is licensed  under a [Creative Commons Attribution 4.0 International license](https://creativecommons.org/licenses/by/4.0/).
diff --git a/docusaurus/docs/loading-graphql-files.md b/docusaurus/docs/loading-graphql-files.md
index aa72e5af475..1d50dcc9875 100644
--- a/docusaurus/docs/loading-graphql-files.md
+++ b/docusaurus/docs/loading-graphql-files.md
@@ -57,7 +57,7 @@ You can also use the `gql` template tag the same way you would use the non-macro
 
 ```js
 import { gql } from 'graphql.macro';
-
+ 
 const query = gql`
   query User {
     user(id: 5) {
diff --git a/docusaurus/docs/proxying-api-requests-in-development.md b/docusaurus/docs/proxying-api-requests-in-development.md
index 11cf1198265..66563e25e45 100644
--- a/docusaurus/docs/proxying-api-requests-in-development.md
+++ b/docusaurus/docs/proxying-api-requests-in-development.md
@@ -87,7 +87,7 @@ Next, create `src/setupProxy.js` and place the following contents in it:
 ```js
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-module.exports = function (app) {
+module.exports = function(app) {
   // ...
 };
 ```
@@ -97,7 +97,7 @@ You can now register proxies as you wish! Here's an example using the above `htt
 ```js
 const { createProxyMiddleware } = require('http-proxy-middleware');
 
-module.exports = function (app) {
+module.exports = function(app) {
   app.use(
     '/api',
     createProxyMiddleware({
diff --git a/docusaurus/website/src/pages/index.js b/docusaurus/website/src/pages/index.js
index 5efc1fa9856..feda132f3c1 100644
--- a/docusaurus/website/src/pages/index.js
+++ b/docusaurus/website/src/pages/index.js
@@ -68,7 +68,10 @@ function Home() {
           <div className="container">
             <div className="row">
               {features.map(({ title, content }, idx) => (
-                <div key={idx} className={clsx('col col--4', styles.feature)}>
+                <div
+                  key={idx}
+                  className={clsx('col col--4', styles.feature)}
+                >
                   <h2>{title}</h2>
                   <p>{content}</p>
                 </div>
diff --git a/packages/create-react-app/__tests__/getTemplateInstallPackage.test.js b/packages/create-react-app/__tests__/getTemplateInstallPackage.test.js
index 6828266e556..457c906b5bb 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 () => {
@@ -33,9 +33,9 @@ describe('getTemplateInstallPackage', () => {
   });
 
   it('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('cra-template@next gives cra-template@next', 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/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 1cfa3ea7940..6a6ab28b32f 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) {
diff --git a/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/scss-styles.scss b/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/scss-styles.scss
index a9e8be2496a..5a764ed2022 100644
--- a/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/scss-styles.scss
+++ b/packages/react-scripts/fixtures/kitchensink/template/src/features/webpack/assets/scss-styles.scss
@@ -1,12 +1,12 @@
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
 
-@import '~bootstrap/scss/reboot';
-@import '~bootstrap/scss/type';
-@import '~bootstrap/scss/images';
-@import '~bootstrap/scss/code';
-@import '~bootstrap/scss/grid';
+@import "~bootstrap/scss/reboot";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/images";
+@import "~bootstrap/scss/code";
+@import "~bootstrap/scss/grid";
 
 #feature-scss-inclusion {
   background: ghostwhite;
diff --git a/packages/react-scripts/lib/react-app.d.ts b/packages/react-scripts/lib/react-app.d.ts
index 780c321229c..624c875ec80 100644
--- a/packages/react-scripts/lib/react-app.d.ts
+++ b/packages/react-scripts/lib/react-app.d.ts
@@ -40,16 +40,16 @@ declare module '*.png' {
 }
 
 declare module '*.webp' {
-  const src: string;
-  export default src;
+    const src: string;
+    export default src;
 }
 
 declare module '*.svg' {
   import * as React from 'react';
 
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
-  >;
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>;
 
   const src: string;
   export default src;
diff --git a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
index 1d1faf95ff3..04e6e4e0020 100644
--- a/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
+++ b/packages/react-scripts/scripts/utils/verifyTypeScriptSetup.js
@@ -221,9 +221,7 @@ function verifyTypeScriptSetup() {
   } else {
     // This is bug fix code of https://github.com/facebook/create-react-app/issues/9868
     // Bellow code release variable from non-extensible and freeze status.
-    appTsConfig.compilerOptions = JSON.parse(
-      JSON.stringify(appTsConfig.compilerOptions)
-    );
+    appTsConfig.compilerOptions = JSON.parse(JSON.stringify(appTsConfig.compilerOptions));
 
     // Original appTsConfig.compilerOptions status
     // Object.isExtensible(appTsConfig.compilerOptions) output: false
diff --git a/test/fixtures/__shared__/util/scripts.js b/test/fixtures/__shared__/util/scripts.js
index 4fbab8555ff..d1799d18bbd 100644
--- a/test/fixtures/__shared__/util/scripts.js
+++ b/test/fixtures/__shared__/util/scripts.js
@@ -30,7 +30,14 @@ function execaSafe(...args) {
       rejected: true,
       reason: err,
       stdout: '',
-      stderr: stripYarn(stripAnsi(err.message.split('\n').slice(2).join('\n'))),
+      stderr: stripYarn(
+        stripAnsi(
+          err.message
+            .split('\n')
+            .slice(2)
+            .join('\n')
+        )
+      ),
     }));
 }
 
diff --git a/test/fixtures/global-scss-asset-resolution/src/index.scss b/test/fixtures/global-scss-asset-resolution/src/index.scss
index 81ade6705a1..151c0b4a6cd 100644
--- a/test/fixtures/global-scss-asset-resolution/src/index.scss
+++ b/test/fixtures/global-scss-asset-resolution/src/index.scss
@@ -1,5 +1,5 @@
 #root {
-  width: 300px;
-  height: 300px;
-  background: url(/images/logo.svg) center/cover no-repeat;
+    width: 300px;
+    height: 300px;
+    background: url(/images/logo.svg) center/cover no-repeat;
 }
diff --git a/test/fixtures/typescript-advanced/src/App.tsx b/test/fixtures/typescript-advanced/src/App.tsx
index 7eaa327be1b..3d14b6cc8bd 100644
--- a/test/fixtures/typescript-advanced/src/App.tsx
+++ b/test/fixtures/typescript-advanced/src/App.tsx
@@ -7,19 +7,19 @@ interface MyType {
 }
 
 function assertIsString(val: any): asserts val is string {
-  if (typeof val !== 'string') {
-    throw new Error('Not a string!');
+  if (typeof val !== "string") {
+      throw new Error("Not a string!");
   }
 }
 
-const foo: any = 'bar';
+const foo: any = "bar";
 assertIsString(foo);
 
 type MyObject = Pick<MyType, 'bar' | 'baz'>;
 
 class App extends React.Component {
   static foo: MyObject = { bar: true, baz: { n: 123 } };
-  n = App.foo?.baz!.n ?? 'foo';
+  n = App.foo?.baz!.n ?? "foo";
 
   render() {
     return <div />;
diff --git a/test/fixtures/typescript/src/App.ts b/test/fixtures/typescript/src/App.ts
index 86b59b61694..ee9276a699a 100644
--- a/test/fixtures/typescript/src/App.ts
+++ b/test/fixtures/typescript/src/App.ts
@@ -22,7 +22,7 @@ function annotation(target: any) {
 }
 
 function propertyDecorator(target: any, key: string) {
-  arguments[2].initializer = function () {
+  arguments[2].initializer = function() {
     return 42;
   };
 }