From 098c5d0ae879b5cdc00a286b574ef2d526e8a1d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= 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 262b9a51685..4f7185b87a7 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 ` forces a project rebuild.
-We’re not sure why this isn't webpack's default behavior.
-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): boolean` Makes sure that all passed files exist.
diff --git a/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js b/packages/react-dev-utils/WatchMissingNodeModulesPlugin.js deleted file mode 100644 index 97759a7f859..00000000000 --- 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 ` 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 79cd2227587..2bebe2a21ea 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 5a76510c2d5..f2a16809138 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 From d0280bd10ab3625dcbda90d6153521169ee3bc5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= 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 986836e2a9a..cea67f13917 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 102204ddd2c..f36a0394e2f 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 e5d41fdb5c9..64a88dde24c 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" From d1f200fd156557f054090d77e4a8f1ad4d82cb33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= 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 ed810df6307..00000000000 --- 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 - ); -}; From 5f2a8144977b27b85b9d895f9f2f36abb909a53d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?= 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 99a930ba470..8902bfd0472 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 cea67f13917..ed4aa0e2966 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",