webpack-hot-middleware in webpack 4 not work, error is webpackHotUpdate is not defined

Environmental:
webpack 4.0.1 node:8.9.4 webpack-hot-middleware: 2.21.1

update to webpack 4,webpack-hot-middleware not working, when update code, hot-update.js has error that say webpackHotUpdate is not defined

code:
import webpack from ‘webpack’;
import webpackHotMiddleware from ‘webpack-hot-middleware’;
import webpackDevMiddleware from ‘webpack-dev-middleware’;

import webpackConfig from ‘webpack/client/webpackDevConfig’;
export default function (app) {
const compiler = webpack(webpackConfig);
compiler.apply(new webpack.ProgressPlugin());
app.use(webpackDevMiddleware(compiler, {
lazy: false,
quiet: false,
noInfo: false,
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false,
},
}));
app.use(webpackHotMiddleware(compiler, {
logLevel: ‘warn’,
log: console.log,
path: ‘/__webpack_hmr’,
heartbeat: 10 * 1000,
}));
}

import webpack from ‘webpack’;
import cloneDeep from ‘lodash/cloneDeep’;
import webpackMerge from ‘webpack-merge’;
import webpackBaseConfig, { SUPPORT_BROWSERS } from ‘./webpackBaseConfig’;

const hotMiddlewareScript = ‘webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true’;

const baseConfig = cloneDeep(webpackBaseConfig);
const entries = baseConfig.entry;
Object.keys(entries).forEach((key) => {
const val = entries[key];
if (!Array.isArray(val)) {
entries[key] = [hotMiddlewareScript].concat(entries[key]);
}
});
baseConfig.entry = entries;

export default webpackMerge.smart(baseConfig, {
mode: “development”,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.SourceMapDevToolPlugin({
filename: ‘[file].map’,
exclude: /(vendor).\w{6}.(js|css)/,
}),
],
module: {
rules: [
{
test: /.(es6|js|jsx)$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
options: {
babelrc: false,
cacheDirectory: ‘.tmp/babel-loader’,
presets: [
[
‘@babel/preset-env’, {
modules: false,
useBuiltIns: ‘usage’,
targets: { browsers: SUPPORT_BROWSERS },
},
],
‘@babel/preset-react’,
‘@babel/preset-stage-0’,
],
plugins: [
‘@babel/plugin-proposal-decorators’,
[‘@babel/plugin-proposal-class-properties’, { loose: true }],
[‘import’, { libraryName: ‘antd-mobile’, style: true }],
],
},
},
],
},
});

Author: Fantashit

1 thought on “webpack-hot-middleware in webpack 4 not work, error is webpackHotUpdate is not defined

  1. It looks like you just deleted/ignored our lovely crafted issue template. It was there for good reasons. Please help us solving your issue by answering the questions asked in this template. I’m closing this. Please open a new issue with filled issue template. Also make sure your issue is not a question. Questions should be posted on Stack Overflow.

Comments are closed.