From 098c5d0ae879b5cdc00a286b574ef2d526e8a1d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <Mh@gi2.dk>
Date: Thu, 1 Jul 2021 22:37:11 +0200
Subject: [PATCH 1/4] Fix periodic recompilation
Removing the WatchMissingNodeModulesPlugin as it's not working in Webpack 5 when caching is enabled
---
packages/react-dev-utils/README.md | 25 --------------
.../WatchMissingNodeModulesPlugin.js | 33 -------------------
packages/react-dev-utils/package.json | 1 -
.../react-scripts/config/webpack.config.js | 7 ----
4 files changed, 66 deletions(-)
delete mode 100644 packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
diff --git a/packages/react-dev-utils/README.md b/packages/react-dev-utils/README.md
index 262b9a516..4f7185b87 100644
--- a/packages/react-dev-utils/README.md
+++ b/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>
diff --git a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
deleted file mode 100644
index 97759a7f8..000000000
--- a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js
+++ /dev/null
@@ -1,33 +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.
- */
-
-// This webpack plugin ensures `npm install <library>` forces a project rebuild.
-// We’re not sure why this isn't webpack's default behavior.
-// See https://github.com/facebook/create-react-app/issues/186.
-
-'use strict';
-
-class WatchMissingNodeModulesPlugin {
- constructor(nodeModulesPath) {
- this.nodeModulesPath = nodeModulesPath;
- }
-
- apply(compiler) {
- compiler.hooks.emit.tap('WatchMissingNodeModulesPlugin', compilation => {
- var missingDeps = Array.from(compilation.missingDependencies);
- var nodeModulesPath = this.nodeModulesPath;
-
- // If any missing files are expected to appear in node_modules...
- if (missingDeps.some(file => file.includes(nodeModulesPath))) {
- // ...tell webpack to watch node_modules recursively until they appear.
- compilation.contextDependencies.add(nodeModulesPath);
- }
- });
- }
-}
-
-module.exports = WatchMissingNodeModulesPlugin;
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 79cd22275..2bebe2a21 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -47,7 +47,6 @@
"redirectServedPathMiddleware.js",
"refreshOverlayInterop.js",
"typescriptFormatter.js",
- "WatchMissingNodeModulesPlugin.js",
"WebpackDevServerUtils.js",
"webpackHotDevClient.js"
],
diff --git a/packages/react-scripts/config/webpack.config.js b/packages/react-scripts/config/webpack.config.js
index 5a76510c2..f2a168091 100644
--- a/packages/react-scripts/config/webpack.config.js
+++ b/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
--
GitLab
From d0280bd10ab3625dcbda90d6153521169ee3bc5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <Mh@gi2.dk>
Date: Thu, 1 Jul 2021 22:38:20 +0200
Subject: [PATCH 2/4] Upodate webpack 5 related dependencies
---
packages/babel-preset-react-app/package.json | 28 ++++++++++----------
packages/react-error-overlay/package.json | 2 +-
packages/react-scripts/package.json | 23 ++++++++--------
3 files changed, 26 insertions(+), 27 deletions(-)
diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json
index 986836e2a..cea67f139 100644
--- a/packages/babel-preset-react-app/package.json
+++ b/packages/babel-preset-react-app/package.json
@@ -21,20 +21,20 @@
"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-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/react-error-overlay/package.json b/packages/react-error-overlay/package.json
index 102204ddd..f36a0394e 100644
--- a/packages/react-error-overlay/package.json
+++ b/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": [
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index e5d41fdb5..64a88dde2 100644
--- a/packages/react-scripts/package.json
+++ b/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"
--
GitLab
From d1f200fd156557f054090d77e4a8f1ad4d82cb33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <Mh@gi2.dk>
Date: Thu, 1 Jul 2021 22:39:19 +0200
Subject: [PATCH 3/4] Remove unused pnpTs file
Support for pnp is builtin to webpack 5 and forkTypescriptChecker
---
packages/react-scripts/config/pnpTs.js | 43 --------------------------
1 file changed, 43 deletions(-)
delete mode 100644 packages/react-scripts/config/pnpTs.js
diff --git a/packages/react-scripts/config/pnpTs.js b/packages/react-scripts/config/pnpTs.js
deleted file mode 100644
index ed810df63..000000000
--- a/packages/react-scripts/config/pnpTs.js
+++ /dev/null
@@ -1,43 +0,0 @@
-// @remove-on-eject-begin
-/**
- * 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.
- */
-// @remove-on-eject-end
-'use strict';
-
-const { resolveModuleName } = require('ts-pnp');
-
-exports.resolveModuleName = (
- typescript,
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost
-) => {
- return resolveModuleName(
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost,
- typescript.resolveModuleName
- );
-};
-
-exports.resolveTypeReferenceDirective = (
- typescript,
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost
-) => {
- return resolveModuleName(
- moduleName,
- containingFile,
- compilerOptions,
- resolutionHost,
- typescript.resolveTypeReferenceDirective
- );
-};
--
GitLab
From 5f2a8144977b27b85b9d895f9f2f36abb909a53d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= <Mh@gi2.dk>
Date: Thu, 1 Jul 2021 22:56:24 +0200
Subject: [PATCH 4/4] Fix babel warning after dependency update
`@babel/plugin-proposal-private-methods` was being used in the background (now explicite dependency) and required loose to be set true / same as `@babel/plugin-proposal-class-properties`
---
packages/babel-preset-react-app/create.js | 12 ++++++++++++
packages/babel-preset-react-app/package.json | 1 +
2 files changed, 13 insertions(+)
diff --git a/packages/babel-preset-react-app/create.js b/packages/babel-preset-react-app/create.js
index 99a930ba4..8902bfd04 100644
--- 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
index cea67f139..ed4aa0e29 100644
--- a/packages/babel-preset-react-app/package.json
+++ b/packages/babel-preset-react-app/package.json
@@ -27,6 +27,7 @@
"@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",
--
GitLab