fix: Upgrade webpack-dev-server (#240)

lib/makeWebpackConfig.js

@@ -18,21 +18,12 @@ module.exports = async (playroomConfig, options) => {
 
   const staticTypes = await getStaticTypes(playroomConfig);
 
-  const devServerEntries = options.production
-    ? []
-    : [
-        `${require.resolve('webpack-dev-server/client')}?http://localhost:${
-          playroomConfig.port
-        }`,
-        `${require.resolve('webpack/hot/dev-server')}`,
-      ];
-
   const ourConfig = {
     mode: options.production ? 'production' : 'development',
     entry: {
-      index: [...devServerEntries, require.resolve('../src/index.js')],
-      frame: [...devServerEntries, require.resolve('../src/frame.js')],
-      preview: [...devServerEntries, require.resolve('../src/preview.js')],
+      index: [require.resolve('../src/index.js')],
+      frame: [require.resolve('../src/frame.js')],
+      preview: [require.resolve('../src/preview.js')],
     },
     output: {
       filename: '[name].[contenthash].js',
@@ -172,12 +163,7 @@ module.exports = async (playroomConfig, options) => {
         filename: 'preview/index.html',
         publicPath: '../',
       }),
-      ...(options.production
-        ? []
-        : [
-            new webpack.HotModuleReplacementPlugin(),
-            new FriendlyErrorsWebpackPlugin(),
-          ]),
+      ...(options.production ? [] : [new FriendlyErrorsWebpackPlugin()]),
     ],
     devtool: !options.production && 'eval-source-map',
   };

lib/start.js

@@ -1,6 +1,5 @@
 const webpack = require('webpack');
 const WebpackDevServer = require('webpack-dev-server');
-const open = require('open');
 const makeWebpackConfig = require('./makeWebpackConfig');
 const portfinder = require('portfinder');
 
@@ -17,38 +16,35 @@ module.exports = async (config, callback) => {
       },
     }
   );
-  const webpackDevServerConfig = {
-    hot: true,
-    stats: {},
-    noInfo: true,
-    quiet: true,
-    clientLogLevel: 'none',
-    compress: true,
-    inline: true,
-    watchOptions: { ignored: /node_modules/ },
-    // Added to prevent Webpack HMR from breaking when iframeSandbox option is used
-    // See: https://github.com/webpack/webpack-dev-server/issues/1604
-    disableHostCheck: true,
-  };
-
-  const compiler = webpack(webpackConfig);
-  const devServer = new WebpackDevServer(compiler, webpackDevServerConfig);
   const { port, openBrowser } = config;
 
   portfinder.getPort({ port }, function (portErr, availablePort) {
     if (portErr) {
       console.error('portErr: ', portErr);
       return;
     }
-    devServer.listen(availablePort, '0.0.0.0', (...args) => {
-      const [err] = args;
+    const webpackDevServerConfig = {
+      hot: true,
+      port: availablePort,
+      open: openBrowser,
+      devMiddleware: {
+        stats: false,
+      },
+      compress: true,
+      static: {
+        watch: { ignored: /node_modules/ },
+      },
+      // Added to prevent Webpack HMR from breaking when iframeSandbox option is used
+      // See: https://github.com/webpack/webpack-dev-server/issues/1604
+      allowedHosts: 'all',
+    };
 
-      if (!err && openBrowser) {
-        open(`http://localhost:${availablePort}`);
-      }
+    const compiler = webpack(webpackConfig);
+    const devServer = new WebpackDevServer(webpackDevServerConfig, compiler);
 
+    devServer.startCallback(() => {
       if (typeof callback === 'function') {
-        callback(...args);
+        callback();
       }
     });
   });

package.json

@@ -100,7 +100,6 @@
     "locate-path": "^6.0.0",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
-    "open": "^8.0.2",
     "parse-prop-types": "^0.3.0",
     "portfinder": "^1.0.28",
     "postcss-loader": "^5.2.0",
@@ -118,7 +117,7 @@
     "url-join": "^4.0.1",
     "use-debounce": "^3.3.0",
     "webpack": "^5.26.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.2.0",
     "webpack-merge": "^5.7.3"
   },
   "devDependencies": {