Update Webpack dependencies and fix minor issues (#11170)

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

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"
   }
 }

packages/react-dev-utils/README.md

@@ -111,31 +111,6 @@ module.exports = {
 };
 ```
 
-#### `new WatchMissingNodeModulesPlugin(nodeModulesPath: string)`
-
-This webpack plugin ensures `npm install <library>` forces a project rebuild.<br>
-We’re not sure why this isn't webpack's default behavior.<br>
-See [#186](https://github.com/facebook/create-react-app/issues/186) for details.
-
-```js
-var path = require('path');
-var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-
-// webpack config
-module.exports = {
-  // ...
-  plugins: [
-    // ...
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebook/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(path.resolve('node_modules')),
-  ],
-  // ...
-};
-```
-
 #### `checkRequiredFiles(files: Array<string>): boolean`
 
 Makes sure that all passed files exist.<br>

packages/react-dev-utils/package.json

@@ -47,7 +47,6 @@
     "redirectServedPathMiddleware.js",
     "refreshOverlayInterop.js",
     "typescriptFormatter.js",
-    "WatchMissingNodeModulesPlugin.js",
     "WebpackDevServerUtils.js",
     "webpackHotDevClient.js"
   ],

packages/react-error-overlay/package.json

@@ -66,7 +66,7 @@
     "rimraf": "^3.0.2",
     "settle-promise": "1.0.0",
     "source-map": "0.5.7",
-    "webpack": "^5.37.0"
+    "webpack": "^5.41.1"
   },
   "jest": {
     "setupFiles": [

packages/react-scripts/config/webpack.config.js

@@ -21,7 +21,6 @@ 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');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const ESLintPlugin = require('eslint-webpack-plugin');
@@ -663,12 +662,6 @@ module.exports = function (webpackEnv) {
       // a plugin that prints an error when you attempt to do this.
       // See https://github.com/facebook/create-react-app/issues/240
       isEnvDevelopment && new CaseSensitivePathsPlugin(),
-      // If you require a missing module and then `npm install` it, you still have
-      // to restart the development server for webpack to discover it. This plugin
-      // makes the discovery automatic so you don't have to restart.
-      // See https://github.com/facebook/create-react-app/issues/186
-      isEnvDevelopment &&
-        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
       isEnvProduction &&
         new MiniCssExtractPlugin({
           // Options similar to the same options in webpackOptions.output

packages/react-scripts/package.json

@@ -29,7 +29,7 @@
   "types": "./lib/react-app.d.ts",
   "dependencies": {
     "@babel/core": "7.14.2",
-    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-beta.8",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.0-rc.0",
     "@svgr/webpack": "5.5.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",
     "@typescript-eslint/parser": "^4.5.0",
@@ -42,8 +42,8 @@
     "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",
+    "css-loader": "5.2.6",
+    "css-minimizer-webpack-plugin": "3.0.2",
     "dotenv": "9.0.2",
     "dotenv-expand": "5.1.0",
     "eslint": "^7.11.0",
@@ -55,19 +55,19 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-testing-library": "^3.9.2",
-    "eslint-webpack-plugin": "^2.5.2",
+    "eslint-webpack-plugin": "^2.5.4",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
-    "html-webpack-plugin": "5.3.1",
+    "html-webpack-plugin": "5.3.2",
     "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": "1.6.0",
-    "postcss": "8.2.15",
+    "mini-css-extract-plugin": "2.0.0",
+    "postcss": "8.3.5",
     "postcss-flexbugs-fixes": "5.0.2",
-    "postcss-loader": "5.3.0",
+    "postcss-loader": "6.1.1",
     "postcss-normalize": "10.0.0",
     "postcss-preset-env": "6.7.0",
     "prompts": "2.4.1",
@@ -76,11 +76,10 @@
     "react-refresh": "^0.10.0",
     "resolve": "1.20.0",
     "resolve-url-loader": "^4.0.0",
-    "sass-loader": "^11.1.1",
+    "sass-loader": "^12.1.0",
     "semver": "7.3.5",
-    "style-loader": "2.0.0",
-    "ts-pnp": "1.2.0",
-    "webpack": "5.37.0",
+    "style-loader": "3.0.0",
+    "webpack": "5.41.1",
     "webpack-dev-server": "4.0.0-beta.3",
     "webpack-manifest-plugin": "3.1.1",
     "workbox-webpack-plugin": "6.1.5"