Webpack 5 (#11201)

Co-authored-by: Ian Schmitz <ianschmitz@gmail.com> Co-authored-by: jasonwilliams <jase.williams@gmail.com> Co-authored-by: Joseph Atkins-Turkish <spacerat3004@gmail.com> Co-authored-by: e-w-h <46170930+e-w-h@users.noreply.github.com> Co-authored-by: Shamprasad RH <shamprasad.rh@mail.weir> Co-authored-by: James George <jamesgeorge998001@gmail.com>
facebook · Aug 4, 2021 · f0a837c · f0a837c
1 parent a179b05
commit f0a837c
Show file tree

Hide file tree

Showing 48 changed files with 2,999 additions and 5,350 deletions.
diff --git a/.github/workflows/integration.yml b/.github/workflows/integration.yml
@@ -14,7 +14,7 @@ jobs:
     strategy:
       matrix:
         os: ['ubuntu-latest', 'macos-latest', 'windows-latest']
-        node: ['10', '12', '14']
+        node: ['14', '16']
     steps:
       - uses: actions/checkout@v2
       - name: Setup node

diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ Create a project, and you’re good to go.
 
 ## Creating an App
 
-**You’ll need to have Node 10.16.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
+**You’ll need to have Node 14.0.0 or later version on your local development machine** (but it’s not required on the server). We recommend using the latest LTS version. You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
 
 To create a new app, you may choose one of the following methods:
 

diff --git 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-latest', nodeVersion: 14.x }
+    LinuxNode16: { vmImage: 'ubuntu-latest', nodeVersion: 16.x }
 
 jobs:
   - job: ${{ parameters.name }}

diff --git 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:
+  #       LinuxNode14: { vmImage: 'ubuntu-latest', nodeVersion: 14.x }
+  #       LinuxNode16: { vmImage: 'ubuntu-latest', nodeVersion: 16.x }
+  #       WindowsNode14: { vmImage: 'windows-2019', nodeVersion: 14.x }
+  #       WindowsNode16: { vmImage: 'windows-2019', nodeVersion: 16.x }
+  #       MacNode14: { vmImage: 'macOS-10.15', nodeVersion: 14.x }
+  #       MacNode16: { vmImage: 'macOS-10.15', nodeVersion: 16.x }
 
   # ******************************************************************************
   # Old Node test suite

diff --git 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/getting-started.md b/docusaurus/docs/getting-started.md
@@ -34,7 +34,7 @@ Create a project, and you’re good to go.
 
 ## Creating an App
 
-**You’ll need to have Node >= 10 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
+**You’ll need to have Node >= 14 on your local development machine** (but it’s not required on the server). You can use [nvm](https://github.com/creationix/nvm#installation) (macOS/Linux) or [nvm-windows](https://github.com/coreybutler/nvm-windows#node-version-manager-nvm-for-windows) to switch Node versions between different projects.
 
 To create a new app, you may choose one of the following methods:
 

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "alex": "^8.2.0",
-    "eslint": "^7.11.0",
+    "eslint": "^7.30.0",
     "execa": "1.0.0",
     "fs-extra": "^9.0.1",
     "get-port": "^5.1.1",

diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js
@@ -146,12 +146,24 @@ module.exports = function (api, opts, env) {
       // class { handleClick = () => { } }
       // Enable loose mode to use assignment instead of defineProperty
       // See discussion in https://github.com/facebook/create-react-app/issues/4263
+      // Note:
+      // 'loose' mode configuration must be the same for
+      // * @babel/plugin-proposal-class-properties
+      // * @babel/plugin-proposal-private-methods
+      // * @babel/plugin-proposal-private-property-in-object
+      // (when they are enabled)
       [
         require('@babel/plugin-proposal-class-properties').default,
         {
           loose: true,
         },
       ],
+      [
+        require('@babel/plugin-proposal-private-methods').default,
+        {
+          loose: true,
+        },
+      ],
       // Adds Numeric Separators
       require('@babel/plugin-proposal-numeric-separator').default,
       // Polyfills the runtime needed for async/await, generators, and friends

diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
@@ -21,20 +21,21 @@
     "test.js"
   ],
   "dependencies": {
-    "@babel/core": "^7.12.3",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-proposal-decorators": "^7.12.1",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
-    "@babel/plugin-proposal-numeric-separator": "^7.12.1",
-    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
-    "@babel/plugin-transform-flow-strip-types": "^7.12.1",
-    "@babel/plugin-transform-react-display-name": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
-    "@babel/preset-typescript": "^7.12.1",
-    "@babel/runtime": "^7.12.1",
-    "babel-plugin-macros": "^2.8.0",
+    "@babel/core": "^7.14.6",
+    "@babel/plugin-proposal-class-properties": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
+    "@babel/plugin-proposal-numeric-separator": "^7.14.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/plugin-proposal-private-methods": "^7.14.5",
+    "@babel/plugin-transform-flow-strip-types": "^7.14.5",
+    "@babel/plugin-transform-react-display-name": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.14.5",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.14.5",
+    "@babel/runtime": "^7.14.5",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24"
   }
 }
diff --git a/packages/cra-template-typescript/package.json b/packages/cra-template-typescript/package.json
@@ -15,7 +15,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "bugs": {
     "url": "https://github.com/facebook/create-react-app/issues"

diff --git a/packages/cra-template/package.json b/packages/cra-template/package.json
@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "bugs": {
     "url": "https://github.com/facebook/create-react-app/issues"

diff --git 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/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js
@@ -239,14 +239,14 @@ function createApp(name, verbose, version, template, useNpm, usePnp) {
   const unsupportedNodeVersion = !semver.satisfies(
     // Coerce strings with metadata (i.e. `15.0.0-nightly`).
     semver.coerce(process.version),
-    '>=10'
+    '>=14'
   );
 
   if (unsupportedNodeVersion) {
     console.log(
       chalk.yellow(
         `You are using Node ${process.version} so the project will be bootstrapped with an old unsupported version of tools.\n\n` +
-          `Please update to Node 10 or higher for a better, fully supported experience.\n`
+          `Please update to Node 14 or higher for a better, fully supported experience.\n`
       )
     );
     // Fall back to latest supported react-scripts on Node 4
@@ -527,7 +527,7 @@ function run(
           console.log(
             chalk.yellow(
               `\nNote: the project was bootstrapped with an old unsupported version of tools.\n` +
-                `Please update to Node >=10 and npm >=6 to get supported tools in new projects.\n`
+                `Please update to Node >=14 and npm >=6 to get supported tools in new projects.\n`
             )
           );
         }

diff --git a/packages/create-react-app/index.js b/packages/create-react-app/index.js
@@ -40,12 +40,12 @@ var currentNodeVersion = process.versions.node;
 var semver = currentNodeVersion.split('.');
 var major = semver[0];
 
-if (major < 10) {
+if (major < 14) {
   console.error(
     'You are running Node ' +
       currentNodeVersion +
       '.\n' +
-      'Create React App requires Node 10 or higher. \n' +
+      'Create React App requires Node 14 or higher. \n' +
       'Please update your version of Node.'
   );
   process.exit(1);

diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json
@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=10"
+    "node": ">=14"
   },
   "bugs": {
     "url": "https://github.com/facebook/create-react-app/issues"