fix: make react-refresh work better with error overlay

Author: egoist

core/dev-utils/package.json

@@ -13,7 +13,7 @@
     "address": "^1.0.3",
     "cross-spawn": "^7.0.2",
     "open": "^7.0.4",
-    "react-error-overlay": "^4.0.1",
+    "react-error-overlay": "^6.0.7",
     "sockjs-client": "^1.1.5",
     "strip-ansi": "5.2.0"
   },

core/dev-utils/refreshOverlayInterop.js

@@ -0,0 +1,9 @@
+const {
+  dismissRuntimeErrors,
+  reportRuntimeError
+} = require('react-error-overlay')
+
+module.exports = {
+  clearRuntimeErrors: dismissRuntimeErrors,
+  handleRuntimeError: reportRuntimeError
+}

core/poi/lib/plugins/config-react-refresh.js

@@ -8,6 +8,18 @@ exports.when = api =>
 exports.apply = api => {
   api.hook('createWebpackChain', config => {
     const reactRefresh = require('@pmmmwh/react-refresh-webpack-plugin')
-    config.plugin('react-refresh').use(reactRefresh)
+    config.plugin('react-refresh').use(reactRefresh, [
+      {
+        overlay: {
+          entry: require.resolve('@poi/dev-utils/hotDevClient'),
+          // 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('@poi/dev-utils/refreshOverlayInterop'),
+          // Since we ship a custom dev client and overlay integration,
+          // the bundled socket handling logic can be eliminated.
+          sockIntegration: false
+        }
+      }
+    ])
   })
 }

core/poi/lib/plugins/serve.js

@@ -54,8 +54,15 @@ exports.cli = api => {
       {
         noInfo: true,
         historyApiFallback: true,
-        overlay: true,
+        overlay: false,
         disableHostCheck: true,
+        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',
+        // Prevent a WS client from getting injected as we're already including
+        // `webpackHotDevClient`.
+        injectClient: false,
         publicPath: webpackConfig.output.publicPath,
         contentBase:
           api.config.publicFolder && api.resolveCwd(api.config.publicFolder),

core/poi/package.json

@@ -73,7 +73,7 @@
     "vue-style-loader": "^4.1.2",
     "webpack": "^4.26.0",
     "webpack-chain": "^6.4.0",
-    "webpack-dev-server": "^3.8.2",
+    "webpack-dev-server": "^3.11.0",
     "webpack-merge": "^4.1.4"
   },
   "xo": false,

yarn.lock

@@ -12619,10 +12619,10 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-error-overlay@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.1.tgz#417addb0814a90f3a7082eacba7cee588d00da89"
-  integrity sha512-xXUbDAZkU08aAkjtUvldqbvI04ogv+a1XdHxvYuHPYKIVk/42BIOD0zSKTHAWV4+gDy3yGm283z2072rA2gdtw==
+react-error-overlay@^6.0.7:
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
+  integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
 
 react-is@^16.12.0:
   version "16.13.1"
@@ -15560,7 +15560,7 @@ webpack-dev-middleware@^3.7.0, webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@^3.8.2:
+webpack-dev-server@^3.11.0:
   version "3.11.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
   integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==