From 0477628adee805fd41f5df0a9eceb12874e85992 Mon Sep 17 00:00:00 2001 From: vectorxu Date: Thu, 19 Mar 2020 12:51:06 +0800 Subject: [PATCH 1/3] chore(examples): update dependencies --- examples/whm-kitchen-sink/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/whm-kitchen-sink/package.json b/examples/whm-kitchen-sink/package.json index 51cd2834..d1fb7540 100644 --- a/examples/whm-kitchen-sink/package.json +++ b/examples/whm-kitchen-sink/package.json @@ -12,7 +12,7 @@ "@babel/core": "^7.6.0", "@babel/preset-env": "^7.6.0", "@babel/preset-react": "^7.0.0", - "@pmmmwh/react-refresh-webpack-plugin": "^0.1.1", + "@pmmmwh/react-refresh-webpack-plugin": "^0.2.0", "babel-loader": "^8.0.6", "cross-env": "^6.0.3", "express": "^4.17.1", From 081cce6dab805289470e497c77a5c815a1b806d0 Mon Sep 17 00:00:00 2001 From: vectorxu Date: Thu, 19 Mar 2020 13:25:45 +0800 Subject: [PATCH 2/3] fix: resolve webpack-hot-middleware conflicts --- src/helpers/injectRefreshEntry.js | 31 ++++++++++++++++++++----------- src/runtime/WHMEventSource.js | 6 +++++- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/src/helpers/injectRefreshEntry.js b/src/helpers/injectRefreshEntry.js index d4a42320..4c4096ee 100644 --- a/src/helpers/injectRefreshEntry.js +++ b/src/helpers/injectRefreshEntry.js @@ -8,23 +8,32 @@ * @returns {WebpackEntry} An injected entry object. */ const injectRefreshEntry = (originalEntry, options) => { - const entryInjects = [ - options.useLegacyWDSSockets && require.resolve('../runtime/LegacyWebpackDevServerSocket'), - // React-refresh runtime - require.resolve('../runtime/ReactRefreshEntry'), - // Error overlay runtime - require.resolve('../runtime/ErrorOverlayEntry'), - // React-refresh Babel transform detection - require.resolve('../runtime/BabelDetectComponent'), - ].filter(Boolean); + const getEntryInjects = ({ webpackHotMiddlewareEntry } = {}) => + [ + options.useLegacyWDSSockets && require.resolve('../runtime/LegacyWebpackDevServerSocket'), + // React-refresh runtime + require.resolve('../runtime/ReactRefreshEntry'), + // webpack-hot-middleware client + webpackHotMiddlewareEntry && webpackHotMiddlewareEntry, + // Error overlay runtime + require.resolve('../runtime/ErrorOverlayEntry'), + // React-refresh Babel transform detection + require.resolve('../runtime/BabelDetectComponent'), + ].filter(Boolean); // Single string entry point if (typeof originalEntry === 'string') { - return [...entryInjects, originalEntry]; + return [...getEntryInjects(), originalEntry]; } // Single array entry point if (Array.isArray(originalEntry)) { - return [...entryInjects, ...originalEntry]; + const webpackHotMiddlewareEntry = originalEntry.find(entry => + entry.includes('webpack-hot-middleware/client') + ); + return [ + ...getEntryInjects({ webpackHotMiddlewareEntry }), + ...originalEntry.filter(entry => !entry.includes('webpack-hot-middleware/client')), + ]; } // Multiple entry points if (typeof originalEntry === 'object') { diff --git a/src/runtime/WHMEventSource.js b/src/runtime/WHMEventSource.js index 47390378..3a2a0e4e 100644 --- a/src/runtime/WHMEventSource.js +++ b/src/runtime/WHMEventSource.js @@ -1,10 +1,14 @@ /* * If the consumers setup is to use webpack-hot-middleware with a custom express server * we want to bind onto the EventSource for error tracking + * + * [Ref](https://github.com/webpack-contrib/webpack-hot-middleware/blob/cb29abb9dde435a1ac8e9b19f82d7d36b1093198/client.js#L152) */ +const singletonKey = '__webpack_hot_middleware_reporter__'; + module.exports = function loadWHMEventSource(messageHandler) { - const client = require('webpack-hot-middleware/client'); + const client = window[singletonKey] || require('webpack-hot-middleware/client'); client.useCustomOverlay({ showProblems(type, data) { From 34a13675b00f66143ab39140db9db190f96774b7 Mon Sep 17 00:00:00 2001 From: vectorxu Date: Fri, 20 Mar 2020 14:01:38 +0800 Subject: [PATCH 3/3] fix: avoid the effects of path segment separator --- src/helpers/injectRefreshEntry.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/helpers/injectRefreshEntry.js b/src/helpers/injectRefreshEntry.js index 4c4096ee..1dacb48d 100644 --- a/src/helpers/injectRefreshEntry.js +++ b/src/helpers/injectRefreshEntry.js @@ -28,11 +28,11 @@ const injectRefreshEntry = (originalEntry, options) => { // Single array entry point if (Array.isArray(originalEntry)) { const webpackHotMiddlewareEntry = originalEntry.find(entry => - entry.includes('webpack-hot-middleware/client') + entry.includes('webpack-hot-middleware') ); return [ ...getEntryInjects({ webpackHotMiddlewareEntry }), - ...originalEntry.filter(entry => !entry.includes('webpack-hot-middleware/client')), + ...originalEntry.filter(entry => !entry.includes('webpack-hot-middleware')), ]; } // Multiple entry points