diff --git a/core/dev-utils/package.json b/core/dev-utils/package.json index 17470cc3..d4247c76 100644 --- a/core/dev-utils/package.json +++ b/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" }, diff --git a/core/dev-utils/refreshOverlayInterop.js b/core/dev-utils/refreshOverlayInterop.js new file mode 100644 index 00000000..bcccf6e9 --- /dev/null +++ b/core/dev-utils/refreshOverlayInterop.js @@ -0,0 +1,9 @@ +const { + dismissRuntimeErrors, + reportRuntimeError +} = require('react-error-overlay') + +module.exports = { + clearRuntimeErrors: dismissRuntimeErrors, + handleRuntimeError: reportRuntimeError +} diff --git a/core/poi/lib/plugins/config-react-refresh.js b/core/poi/lib/plugins/config-react-refresh.js index 85493182..f1a9c57e 100644 --- a/core/poi/lib/plugins/config-react-refresh.js +++ b/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 + } + } + ]) }) } diff --git a/core/poi/lib/plugins/serve.js b/core/poi/lib/plugins/serve.js index dceb4b9e..1fba05d9 100644 --- a/core/poi/lib/plugins/serve.js +++ b/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), diff --git a/core/poi/package.json b/core/poi/package.json index 2d24d83e..0e40df73 100644 --- a/core/poi/package.json +++ b/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, diff --git a/yarn.lock b/yarn.lock index 28c304e7..41a2b281 100644 --- a/yarn.lock +++ b/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==