build: replace jwl-dev-utils with react-dev-utils

packages/desktop-client/config/webpack.config.js

@@ -7,26 +7,24 @@ const resolve = require('resolve');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InlineChunkHtmlPlugin = require('jwl-dev-utils/InlineChunkHtmlPlugin');
+const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
 const ManifestPlugin = require('webpack-manifest-plugin');
-const InterpolateHtmlPlugin = require('jwl-dev-utils/InterpolateHtmlPlugin');
+const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
-const WatchMissingNodeModulesPlugin = require('jwl-dev-utils/WatchMissingNodeModulesPlugin');
-const ModuleScopePlugin = require('jwl-dev-utils/ModuleScopePlugin');
-const getCSSModuleLocalIdent = require('jwl-dev-utils/getCSSModuleLocalIdent');
+const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
-const ModuleNotFoundPlugin = require('jwl-dev-utils/ModuleNotFoundPlugin');
+const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
-const typescriptFormatter = require('jwl-dev-utils/typescriptFormatter');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 
 const webpackDevClientEntry = require.resolve(
-  'jwl-dev-utils/webpackHotDevClient'
+  'react-dev-utils/webpackHotDevClient'
 );
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -290,7 +288,7 @@ module.exports = function(webpackEnv) {
           use: [
             {
               options: {
-                formatter: require.resolve('jwl-dev-utils/eslintFormatter'),
+                formatter: require.resolve('react-dev-utils/eslintFormatter'),
                 eslintPath: require.resolve('eslint')
               },
               loader: require.resolve('eslint-loader')
@@ -490,7 +488,7 @@ module.exports = function(webpackEnv) {
             entry: webpackDevClientEntry,
             // The expected exports are slightly different from what the overlay exports,
             // so an interop is included here to enable feedback on module-level errors.
-            module: require.resolve('jwl-dev-utils/refreshOverlayInterop'),
+            module: require.resolve('react-dev-utils/refreshOverlayInterop'),
             // Since we ship a custom dev client and overlay integration,
             // the bundled socket handling logic can be eliminated.
             sockIntegration: false
@@ -500,12 +498,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
@@ -545,6 +537,8 @@ module.exports = function(webpackEnv) {
           ]
         }),
       // TypeScript type checking
+      // This hasn't been tested since migrating away from `jwl-dev-utils` as we
+      // don't currently use TypeScript and we'll likely have to update the dependency anyway.
       useTypeScript &&
         new ForkTsCheckerWebpackPlugin({
           typescript: resolve.sync('typescript', {
@@ -571,7 +565,6 @@ module.exports = function(webpackEnv) {
           ],
           watch: paths.appSrc,
           silent: true,
-          formatter: typescriptFormatter
         })
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.

packages/desktop-client/config/webpackDevServer.config.js

@@ -1,10 +1,10 @@
 'use strict';
 
 const fs = require('fs');
-const errorOverlayMiddleware = require('jwl-dev-utils/errorOverlayMiddleware');
-const evalSourceMapMiddleware = require('jwl-dev-utils/evalSourceMapMiddleware');
-const noopServiceWorkerMiddleware = require('jwl-dev-utils/noopServiceWorkerMiddleware');
-const ignoredFiles = require('jwl-dev-utils/ignoredFiles');
+const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
+const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
+const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
+const ignoredFiles = require('react-dev-utils/ignoredFiles');
 const paths = require('./paths');
 const getHttpsConfig = require('./getHttpsConfig');
 

packages/desktop-client/package.json

@@ -43,7 +43,6 @@
     "html-webpack-plugin": "4.0.0-alpha.2",
     "http-client": "^4.3.1",
     "identity-obj-proxy": "3.0.0",
-    "jwl-dev-utils": "^6.1.3",
     "load-js": "^3.0.3",
     "lodash.memoize": "^4.1.2",
     "mini-css-extract-plugin": "0.4.3",
@@ -61,6 +60,7 @@
     "react-addons-shallow-compare": "^15.6.0",
     "react-app-polyfill": "^0.1.3",
     "react-autosuggest": "9.3.2",
+    "react-dev-utils": "^12.0.1",
     "react-dnd": "^10.0.2",
     "react-dom": "16.13.1",
     "react-modal": "3.4.4",

packages/desktop-client/scripts/build.js

@@ -22,11 +22,11 @@ const webpack = require('webpack');
 const bfj = require('bfj');
 const configFactory = require('../config/webpack.config');
 const paths = require('../config/paths');
-const checkRequiredFiles = require('jwl-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('jwl-dev-utils/formatWebpackMessages');
-const printHostingInstructions = require('jwl-dev-utils/printHostingInstructions');
-const FileSizeReporter = require('jwl-dev-utils/FileSizeReporter');
-const printBuildError = require('jwl-dev-utils/printBuildError');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
+const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
+const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
+const printBuildError = require('react-dev-utils/printBuildError');
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -53,7 +53,7 @@ const config = configFactory('production');
 
 // We require that you explicitly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('jwl-dev-utils/browsersHelper');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // First, read the current file sizes in build directory.

packages/desktop-client/scripts/start.js

@@ -19,15 +19,15 @@ const fs = require('fs');
 const chalk = require('chalk');
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('jwl-dev-utils/clearConsole');
-const checkRequiredFiles = require('jwl-dev-utils/checkRequiredFiles');
+const clearConsole = require('react-dev-utils/clearConsole');
+const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const {
   choosePort,
   createCompiler,
   prepareProxy,
   prepareUrls,
-} = require('jwl-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('jwl-dev-utils/openBrowser');
+} = require('react-dev-utils/WebpackDevServerUtils');
+const openBrowser = require('react-dev-utils/openBrowser');
 const paths = require('../config/paths');
 const configFactory = require('../config/webpack.config');
 const createDevServerConfig = require('../config/webpackDevServer.config');
@@ -63,7 +63,7 @@ if (process.env.HOST) {
 
 // We require that you explictly set browsers and do not fall back to
 // browserslist defaults.
-const { checkBrowsers } = require('jwl-dev-utils/browsersHelper');
+const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 checkBrowsers(paths.appPath, isInteractive)
   .then(() => {
     // We attempt to use the default port but if it is busy, we offer the user to
@@ -80,7 +80,7 @@ checkBrowsers(paths.appPath, isInteractive)
     const appName = require(paths.appPackageJson).name;
     const urls = prepareUrls(protocol, HOST, port);
     // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
+    const compiler = createCompiler({ webpack, config, appName, urls, useYarn });
     // Load proxy config
     const proxySetting = require(paths.appPackageJson).proxy;
     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);