Additional follow-up fix for #1704 to remove remaining warnings

packages/razzle-dev-utils/devServerMajor.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const devserverPkg = require('webpack-dev-server/package.json');
+
+module.exports = devserverPkg.version ? parseInt(devserverPkg.version[0]) : 3;

packages/razzle-dev-utils/webpackHotDevClient.js

@@ -12,11 +12,19 @@
 var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
-var createSocketUrl = require('webpack-dev-server/client/utils/createSocketUrl');
 var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
+var devServerMajorVersion = require('./devServerMajor');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
 
+var createSocketUrl;
+if (devServerMajorVersion > 3) {
+  // The path changed with v4
+  createSocketUrl = require('webpack-dev-server/client/utils/createSocketURL');
+} else {
+  createSocketUrl = require('webpack-dev-server/client/utils/createSocketUrl');
+}
+
 var socketUrl = createSocketUrl();
 var parsedSocketUrl = url.parse(socketUrl);
 

packages/razzle/config/createConfigAsync.js

@@ -24,10 +24,7 @@ const logger = require('razzle-dev-utils/logger');
 const razzlePaths = require('./paths');
 const getCacheIdentifier = require('react-dev-utils/getCacheIdentifier');
 const webpackMajor = require('razzle-dev-utils/webpackMajor');
-const devserverPkg = require('webpack-dev-server/package.json');
-
-// Parse the first character from the `x.y.z` version notation (i.e. major version)
-const devServerMajorVersion = parseInt(devserverPkg.version[0]);
+const devServerMajorVersion = require('razzle-dev-utils/devServerMajor');
 
 const hasPostCssConfigTest = () => {
   try {
@@ -850,6 +847,7 @@ module.exports = (
             // See https://github.com/facebookincubator/create-react-app/issues/387.
             disableDotRule: true,
           },
+          hot: true,
           host: dotenv.raw.HOST,
           port: devServerPort,
         };
@@ -880,7 +878,6 @@ module.exports = (
             disableHostCheck: true,
             clientLogLevel: 'none', // Enable gzip compression of generated files.
             publicPath: clientPublicPath,
-            hot: true,
             noInfo: true,
             overlay: false,
             quiet: true, // By default files from `contentBase` will not trigger a page reload.
@@ -897,10 +894,12 @@ module.exports = (
         // Add client-only development plugins
         config.plugins = [
           ...config.plugins,
-          new webpack.HotModuleReplacementPlugin({
-            // set this true will break HtmlWebpackPlugin
-            multiStep: !clientOnly,
-          }),
+          devServerMajorVersion > 3
+            ? null // avoid warning since v4 automatically adds the HRM plugin when `hot` is true
+            : new webpack.HotModuleReplacementPlugin({
+                // set this true will break HtmlWebpackPlugin
+                multiStep: !clientOnly,
+              }),
           shouldUseReactRefresh
             ? new ReactRefreshWebpackPlugin({
                 overlay: {

packages/razzle/scripts/start.js

@@ -14,6 +14,7 @@ const logger = require('razzle-dev-utils/logger');
 const setPorts = require('razzle-dev-utils/setPorts');
 const chalk = require('chalk');
 const terminate = require('terminate');
+const devServerMajorVersion = require('razzle-dev-utils/devServerMajor');
 
 let verbose = false;
 
@@ -167,25 +168,38 @@ function main() {
               );
             }
 
+            // Provide a reusable logger function
+            const errorLogger = (err) => {
+              if (err) {
+                logger.error(err);
+              }
+            };
+
             if (!serverOnly) {
               // Create a new instance of Webpack-dev-server for our client assets.
               // This will actually run on a different port than the users app.
               clientDevServer = new devServer(
                 clientCompiler,
-                Object.assign(clientConfig.devServer, { verbose: verbose })
+                Object.assign(clientConfig.devServer, { verbose, port }),
               );
-              // Start Webpack-dev-server
-              clientDevServer.listen(port, err => {
-                if (err) {
-                  logger.error(err);
-                }
-              });
+              if (devServerMajorVersion > 3) {
+                // listen was deprecated in v4 and causes issues when used, switch to its replacement
+                clientDevServer.startCallback(errorLogger);
+              } else {
+                // Start Webpack-dev-server
+                clientDevServer.listen(port, errorLogger);
+              }
             }
 
             ['SIGINT', 'SIGTERM'].forEach(sig => {
               process.on(sig, () => {
                 if (clientDevServer) {
-                  clientDevServer.close();
+                  if (devServerMajorVersion > 3) {
+                    // close was deprecated in v4, switch to its replacement
+                    clientDevServer.stopCallback(errorLogger);
+                  } else {
+                    clientDevServer.close(errorLogger);
+                  }
                 }
                 if (watching) {
                   watching.close();