chore(deps): bump react-dev-utils from 9.0.1 to 12.0.1

config/main.webpack.config.js

@@ -2,12 +2,18 @@ const path = require('path');
 const paths = require('./paths');
 const webpack = require('webpack');
 const getClientEnvironment = require('./env');
+const webpackNodeExternals = require('webpack-node-externals');
 
 module.exports = mode => {
   const env = getClientEnvironment('/');
 
   return {
     target: 'electron-main',
+    externals: [
+      webpackNodeExternals({
+        allowlist: [/webpack(\/.*)?/, 'electron-devtools-installer'],
+      }),
+    ],
     mode,
     context: path.resolve(__dirname, 'src'),
     entry: {

config/renderer.webpack.config.js

@@ -11,13 +11,13 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const paths = require('./paths');
 const modules = require('./modules');
 const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const webpackNodeExternals = require('webpack-node-externals');
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
@@ -51,6 +51,11 @@ module.exports = function(webpackEnv) {
 
   return {
     target: 'electron-renderer',
+    externals: [
+      webpackNodeExternals({
+        allowlist: [/webpack(\/.*)?/, 'electron-devtools-installer'],
+      }),
+    ],
     mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
     // Stop compilation early in production
     bail: isEnvProduction,
@@ -323,17 +328,10 @@ module.exports = function(webpackEnv) {
       // during a production build.
       // Otherwise React will be compiled in the very slow development mode.
       new webpack.DefinePlugin(env.stringified),
-      // This is necessary to emit hot updates (currently CSS only):
-      isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
       // Watcher doesn't work well if you mistype casing in a path so we use
       // 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),
       isEnvDevelopment && new ReactRefreshWebpackPlugin(),
     ].filter(Boolean),
     // Some libraries import Node modules but don't use them in the browser.

config/webpackDevServer.config.js

@@ -28,68 +28,54 @@ module.exports = function(proxy, allowedHost) {
     // So we will disable the host check normally, but enable it if you have
     // specified the `proxy` setting. Finally, we let you override it if you
     // really know what you're doing with a special environment variable.
-    disableHostCheck:
+    allowedHosts: !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true' ? 'all' : [host, allowedHost],
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
     // Enable gzip compression of generated files.
     compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
     // for the WebpackDevServer client so it can learn when the files were
     // updated. The WebpackDevServer client is included as an entry point
     // in the Webpack development configuration. Note that only changes
     // to CSS are currently hot reloaded. JS changes will refresh the browser.
     hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: '/',
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebook/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebook/create-react-app/issues/1065
-    watchOptions: {
-      ignored: ignoredFiles(paths.appSrc),
-    },
     // Enable HTTPS if the HTTPS environment variable is set to 'true'
     https: protocol === 'https',
     host,
-    overlay: false,
     historyApiFallback: {
       // Paths with dots should still use the history fallback.
       // See https://github.com/facebook/create-react-app/issues/387.
       disableDotRule: true,
     },
-    public: allowedHost,
+    client: {
+      overlay: false,
+      // Silence WebpackDevServer's own logs since they're generally not useful.
+      // It will still show compile warnings and errors with this setting.
+      logging: 'none',
+    },
+    static: {
+      // Reportedly, this avoids CPU overload on some systems.
+      // https://github.com/facebook/create-react-app/issues/293
+      // src/node_modules is not ignored to support absolute imports
+      // https://github.com/facebook/create-react-app/issues/1065
+      watch: {
+        ignored: ignoredFiles(paths.appSrc),
+      },
+    },
+    devMiddleware: {
+      // It is important to tell WebpackDevServer to use the same "root" path
+      // as we specified in the config. In development, we always serve from /.
+      publicPath: '/',
+    },
+    // public: allowedHost,
     proxy,
-    before(app, server) {
+    onBeforeSetupMiddleware(devServer) {
+      const app = devServer.app;
       if (fs.existsSync(paths.proxySetup)) {
         // This registers user provided middleware for proxy reasons
         require(paths.proxySetup)(app);
       }
 
       // This lets us fetch source contents from webpack for the error overlay
-      app.use(evalSourceMapMiddleware(server));
+      app.use(evalSourceMapMiddleware(devServer));
       // This lets us open files from the runtime error overlay.
       app.use(errorOverlayMiddleware());
 
@@ -98,7 +84,7 @@ module.exports = function(proxy, allowedHost) {
       // We do this in development to avoid hitting the production cache if
       // it used the same host and port.
       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
+      app.use(noopServiceWorkerMiddleware('/'));
     },
   };
 };

package.json

@@ -172,7 +172,7 @@
     "miragejs": "^0.1.41",
     "pnp-webpack-plugin": "1.2.1",
     "prettier": "^1.18.2",
-    "react-dev-utils": "^9.0.1",
+    "react-dev-utils": "12.0.1",
     "react-refresh": "^0.13.0",
     "rescript": "9.1.4",
     "resolve": "1.17.0",
@@ -183,7 +183,8 @@
     "typescript": "^3.5.3",
     "url-loader": "1.1.2",
     "webpack": "^4.46.0",
-    "webpack-dev-server": "^3.11.0"
+    "webpack-dev-server": "4.10.0",
+    "webpack-node-externals": "^3.0.0"
   },
   "browserslist": {
     "production": [

src/electron/MainWindow.js

@@ -33,8 +33,6 @@ const makeMainWindowSettings = () => {
         nodeIntegration: true,
         contextIsolation: false,
         webSecurity: false,
-        // FIXME: When migrating to electron 13
-        enableRemoteModule: true,
       },
     },
   ];