Merge branch 'facebook:main' into main

.eslintignore

 node_modules/
-build
-my-app*
-packages/react-scripts/template
-packages/react-scripts/fixtures
-fixtures/
+build/
+test/fixtures/webpack-message-formatting/src/AppBabel.js
+packages/react-error-overlay/lib/

.eslintrc.json

@@ -14,5 +14,39 @@
     "no-console": "off",
     "strict": ["error", "global"],
     "curly": "warn"
-  }
+  },
+  "overrides": [
+    {
+      "files": [
+        "docusaurus/website/src/**/*.js",
+        "packages/cra-template/**/*.js",
+        "packages/react-error-overlay/**/*.js",
+        "packages/react-scripts/fixtures/kitchensink/template/{src,integration}/**/*.js",
+        "test/fixtures/*/src/*.js"
+      ],
+      "excludedFiles": ["packages/react-error-overlay/*.js"],
+      "extends": ["react-app", "react-app/jest"]
+    },
+    {
+      "files": [
+        "test/fixtures/webpack-message-formatting/src/{AppLintError,AppLintWarning,AppUnknownFile}.js"
+      ],
+      "rules": {
+        "no-unused-vars": "off",
+        "no-undef": "off"
+      }
+    },
+    {
+      "files": ["test/fixtures/webpack-message-formatting/src/Export5.js"],
+      "rules": {
+        "import/no-anonymous-default-export": "off"
+      }
+    },
+    {
+      "files": ["test/fixtures/issue-5176-flow-class-properties/src/App.js"],
+      "rules": {
+        "no-dupe-class-members": "off"
+      }
+    }
+  ]
 }

.github/workflows/build.yml

 name: Build
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   build:
@@ -11,8 +11,8 @@ jobs:
         with:
           node-version: '14'
           cache: 'npm'
-      - name: Install npm@7
-        run: npm i -g npm@7
+      - name: Install npm@8
+        run: npm i -g npm@8
       - name: Install
         run: npm ci --prefer-offline
       - name: Build

.github/workflows/integration.yml

@@ -22,8 +22,10 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
           cache: 'npm'
-      - name: Install npm@7
-        run: npm i -g npm@7
+      - name: Install npm@8
+        run: npm i -g npm@8
+      - name: Install yarn
+        run: npm i -g yarn
       - name: Install packages
         run: npm ci --prefer-offline
       - name: Run integration tests

.github/workflows/lint.yml

 name: Lint
 
-on: [push]
+on: [push, pull_request]
 
 jobs:
   lint:
@@ -11,9 +11,15 @@ jobs:
         with:
           node-version: '14'
           cache: 'npm'
-      - name: Install npm@7
-        run: npm i -g npm@7
+      - name: Install npm@8
+        run: npm i -g npm@8
       - name: Install
         run: npm ci --prefer-offline
+      - name: Build
+        run: npm run build
       - name: Alex
         run: npm run alex
+      - name: Prettier
+        run: npm run prettier -- --list-different
+      - name: Eslint
+        run: npm run eslint -- --max-warnings 0

.gitignore

 .idea/
 .vscode/
 node_modules/
-build
+build/
 .DS_Store
 *.tgz
 my-app*

.prettierignore

+build/
+package-lock.json
+test/fixtures/webpack-message-formatting/src/AppBabel.js
+test/fixtures/webpack-message-formatting/src/AppCss.css
+packages/react-error-overlay/fixtures/bundle*
+packages/react-error-overlay/fixtures/inline*
+packages/react-error-overlay/fixtures/junk*
+packages/react-error-overlay/lib/
+packages/react-error-overlay/coverage/

CONTRIBUTING.md

@@ -54,10 +54,16 @@ These packages can be found in the [`packages/`](https://github.com/facebook/cre
 
 ```
 packages/
+  babel-plugin-named-asset-import/
   babel-preset-react-app/
+  confusing-browser-globals/
+  cra-template/
+  cra-template-typescript/
   create-react-app/
   eslint-config-react-app/
+  react-app-polyfill/
   react-dev-utils/
+  react-error-overlay/
   react-scripts/
 ```
 
@@ -145,7 +151,7 @@ By default git would use `CRLF` line endings which would cause the scripts to fa
 2. Close the milestone and create a new one for the next release.
 3. In most releases, only `react-scripts` needs to be released. If you don’t have any changes to the `packages/create-react-app` folder, you don’t need to bump its version or publish it (the publish script will publish only changed packages).
 4. Note that files in `packages/create-react-app` should be modified with extreme caution. Since it’s a global CLI, any version of `create-react-app` (global CLI) including very old ones should work with the latest version of `react-scripts`.
-5. Pull the latest changes from GitHub, run `npm ci` and then `npm run compile:lockfile`. The command will generate an updated lockfile in `packages/create-react-app` that should be committed.
+5. Pull the latest changes from GitHub, run `npm ci`.
 6. Create a change log entry for the release:
 
 - You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
@@ -163,9 +169,10 @@ Make sure to test the released version! If you want to be extra careful, you can
 ## Releasing the Docs
 
 1. Go to the `docusaurus/website` directory
-2. Run `npm run build`
-3. You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
-4. Run `GIT_USER=<GITHUB_USERNAME> CURRENT_BRANCH=main USE_SSH=true npm run deploy`
+2. Run `npm ci`
+3. Run `npm run build`
+4. You'll need an [access token for the GitHub API](https://help.github.com/articles/creating-an-access-token-for-command-line-use/). Save it to this environment variable: `export GITHUB_AUTH="..."`
+5. Run `GIT_USER=<GITHUB_USERNAME> CURRENT_BRANCH=main USE_SSH=true npm run deploy`
 
 ---
 

README.md

@@ -171,7 +171,7 @@ Create React App is a great fit for:
 
 Here are a few common cases where you might want to try something else:
 
-- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/try-react.html).
+- If you want to **try React** without hundreds of transitive build tool dependencies, consider [using a single HTML file or an online sandbox instead](https://reactjs.org/docs/getting-started.html#try-react).
 
 - If you need to **integrate React code with a server-side template framework** like Rails, Django or Symfony, or if you’re **not building a single-page app**, consider using [nwb](https://github.com/insin/nwb), or [Neutrino](https://neutrino.js.org/) which are more flexible. For Rails specifically, you can use [Rails Webpacker](https://github.com/rails/webpacker). For Symfony, try [Symfony's webpack Encore](https://symfony.com/doc/current/frontend/encore/reactjs.html).
 
@@ -185,7 +185,7 @@ Here are a few common cases where you might want to try something else:
 
 All of the above tools can work with little to no configuration.
 
-If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-an-existing-app.html).
+If you prefer configuring the build yourself, [follow this guide](https://reactjs.org/docs/add-react-to-a-website.html).
 
 ## React Native
 

azure-pipelines-test-job.yml

@@ -31,8 +31,8 @@ jobs:
           versionSpec: $(nodeVersion)
         displayName: 'Install Node.js'
 
-      - script: npm i -g npm@7
-        displayName: 'Update npm to v7'
+      - script: npm i -g npm@8
+        displayName: 'Update npm to v8'
 
       - script: npm ci
         displayName: 'Run npm ci'

docusaurus/docs/adding-a-router.md

@@ -3,12 +3,12 @@ id: adding-a-router
 title: Adding a Router
 ---
 
-Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one.
+Create React App doesn't prescribe a specific routing solution, but [React Router](https://reactrouter.com/) is the most popular one.
 
 To add it, run:
 
 ```sh
-npm install --save react-router-dom
+npm install react-router-dom
 ```
 
 Alternatively you may use `yarn`:
@@ -17,6 +17,6 @@ Alternatively you may use `yarn`:
 yarn add react-router-dom
 ```
 
-To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reacttraining.com/react-router/web/example/basic) is a good place to get started.
+To try it, delete all the code in `src/App.js` and replace it with any of the examples on its website. The [Basic Example](https://reactrouter.com/docs/examples/basic) is a good place to get started. For more info on adding routes, check out [the React Router docs on adding routes](https://reactrouter.com/docs/getting-started/tutorial#add-some-routes).
 
 Note that [you may need to configure your production server to support client-side routing](deployment.md#serving-apps-with-client-side-routing) before deploying your app.

docusaurus/docs/adding-typescript.md

@@ -13,9 +13,11 @@ To start a new Create React App project with [TypeScript](https://www.typescript
 
 ```sh
 npx create-react-app my-app --template typescript
+```
 
-# or
+or
 
+```sh
 yarn create react-app my-app --template typescript
 ```
 
@@ -27,13 +29,17 @@ To add [TypeScript](https://www.typescriptlang.org/) to an existing Create React
 
 ```sh
 npm install --save typescript @types/node @types/react @types/react-dom @types/jest
+```
 
-# or
+or
 
+```sh
 yarn add typescript @types/node @types/react @types/react-dom @types/jest
 ```
 
-Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and **restart your development server**!
+Next, rename any file to be a TypeScript file (e.g. `src/index.js` to `src/index.tsx`) and create tsconfig.json if it's not in the root of your project [`tsconfig.json` file](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
+
+Finally **restart your development server**!
 
 Type errors will show up in the same console as the build one. You'll have to fix these type errors before you continue development or build your project. For advanced configuration, [see here](advanced-configuration.md).
 

docusaurus/docs/advanced-configuration.md

@@ -15,16 +15,16 @@ 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 `/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_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.                                                                                                                                                                                                                                     |
+| 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.md#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.                                                                                                                                                                                                                                                                                                                                                                                          |
 | CI                        |   ✅ Used   |  ✅ Used   | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | REACT_EDITOR              |   ✅ Used   | 🚫 Ignored | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebook/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](<https://en.wikipedia.org/wiki/PATH_(variable)>) environment variable points to your editor’s bin folder. You can also set it to `none` to disable it completely. |
 | CHOKIDAR_USEPOLLING       |   ✅ Used   | 🚫 Ignored | When set to `true`, the watcher runs in polling mode, as necessary inside a VM. Use this option if `npm start` isn't detecting changes.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | GENERATE_SOURCEMAP        | 🚫 Ignored  |  ✅ Used   | When set to `false`, source maps are not generated for a production build. This solves out of memory (OOM) issues on some smaller machines.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 | INLINE_RUNTIME_CHUNK      | 🚫 Ignored  |  ✅ Used   | By default, Create React App will embed the runtime script into `index.html` during the production build. When set to `false`, the script will not be embedded and will be imported as usual. This is normally required when dealing with CSP.                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| IMAGE_INLINE_SIZE_LIMIT   |   ✅ Used   |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| IMAGE_INLINE_SIZE_LIMIT   |   ✅ Used   |  ✅ Used   | By default, images smaller than 10,000 bytes are encoded as a data URI in base64 and inlined in the CSS or JS build artifact. Set this to control the size limit in bytes. Setting it to `0` will disable the inlining of images.                                                                                                                                                                                                                                                                                                                                                                                                                                        |
 | FAST_REFRESH              |   ✅ Used   | 🚫 Ignored | When set to `false`, disables experimental support for Fast Refresh to allow you to tweak your components in real time without reloading the page.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 | TSC_COMPILE_ON_ERROR      |   ✅ Used   |  ✅ Used   | When set to `true`, you can run and properly build TypeScript projects even if there are TypeScript type check errors. These errors are printed as warnings in the terminal and/or browser console.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | ESLINT_NO_DEV_ERRORS      |   ✅ Used   | 🚫 Ignored | When set to `true`, ESLint errors are converted to warnings during development. As a result, ESLint output will no longer appear in the error overlay.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

docusaurus/docs/deployment.md

@@ -318,13 +318,13 @@ The `predeploy` script will run automatically before `deploy` is run.
 If you are deploying to a GitHub user page instead of a project page you'll need to make one
 additional modification:
 
-1. Tweak your `package.json` scripts to push deployments to **master**:
+1. Tweak your `package.json` scripts to push deployments to **main**:
 
 ```diff
   "scripts": {
     "predeploy": "npm run build",
 -   "deploy": "gh-pages -d build",
-+   "deploy": "gh-pages -b master -d build",
++   "deploy": "gh-pages -b main -d build",
 ```
 
 ### Step 3: Deploy the site by running `npm run deploy`
@@ -378,7 +378,7 @@ If, when deploying, you get `Cannot read property 'email' of null`, try the foll
 
 ## [Heroku](https://www.heroku.com/)
 
-Use the [Heroku Buildpack for Create React App](https://github.com/mars/create-react-app-buildpack).
+Use the [Heroku Buildpack for Create React App](https://github.com/heroku/heroku-buildpack-nodejs).
 
 You can find instructions in [Deploying React with Zero Configuration](https://blog.heroku.com/deploying-react-with-zero-configuration).
 
@@ -464,7 +464,7 @@ If you want to use a Custom Domain with your Vercel deployment, you can **Add**
 
 To add your domain to your project, navigate to your [Project](https://vercel.com/docs/platform/projects) from the Vercel Dashboard. Once you have selected your project, click on the "Settings" tab, then select the **Domains** menu item. From your projects **Domain** page, enter the domain you wish to add to your project.
 
-Once the domain as been added, you will be presented with different methods for configuring it.
+Once the domain has been added, you will be presented with different methods for configuring it.
 
 ### Deploying a fresh React project
 

docusaurus/docs/developing-components-in-isolation.md

@@ -14,7 +14,7 @@ Usually, it’s hard to see these states without running a sample app or some ex
 
 Create React App doesn’t include any tools for this by default, but you can add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**.
 
-![Storybook for React Demo](https://i.imgur.com/7CIAWpB.gif)
+![Storybook for React Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/docs/get-started/storybook-third-party-docs.gif)
 
 You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app.
 
@@ -25,15 +25,15 @@ Storybook is a development environment for React UI components. It allows you to
 Run the following command inside your app’s directory:
 
 ```sh
-npx -p @storybook/cli sb init
+npx sb init
 ```
 
 After that, follow the instructions on the screen.
 
 Learn more about React Storybook:
 
-- [Learn Storybook (tutorial)](https://learnstorybook.com)
-- [Documentation](https://storybook.js.org/basics/introduction/)
+- [Learn Storybook (tutorial)](https://storybook.js.org/tutorials/)
+- [Documentation](https://storybook.js.org/docs/react/get-started/introduction)
 - [GitHub Repo](https://github.com/storybooks/storybook)
 - [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot
 

docusaurus/docs/getting-started.md

@@ -41,7 +41,7 @@ To create a new app, you may choose one of the following methods:
 ### npx
 
 ```sh
-npx create-react-app my-app
+npx create-react-app@latest my-app
 ```
 
 _([npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) comes with npm 5.2+ and higher, see [instructions for older npm versions](https://gist.github.com/gaearon/4064d3c23a77c74a3614c498a8bb1c5f))_

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) {

docusaurus/docs/making-a-progressive-web-app.md

@@ -4,7 +4,7 @@ title: Making a Progressive Web App
 ---
 
 The production build has all the tools necessary to generate a first-class
-[Progressive Web App](https://developers.google.com/web/progressive-web-apps/),
+[Progressive Web App](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps),
 but **the offline/cache-first behavior is opt-in only**.
 
 Starting with Create React App 4, you can add a `src/service-worker.js` file to
@@ -69,7 +69,7 @@ However, they [can make debugging deployments more
 challenging](https://github.com/facebook/create-react-app/issues/2398).
 
 The
-[`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin)
+[`workbox-webpack-plugin`](https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin/)
 is integrated into production configuration, and it will take care of compiling
 a service worker file that will automatically precache all of your
 `webpack`-generated assets and keep them up to date as you deploy updates. The