Repository navigation
Enabling Hot Module Replacement breaks Automatic Refresh #1160
Description
- Operating System: Windows 10
- Node Version: 8.4.0
- NPM Version: 5.3.0
- webpack Version: 3.6.0
- webpack-dev-server Version: 3.8.1
- This is a bug
- This is a feature request
- This is a modification request
Code
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].bundle.js',
},
module: {
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
{
test: /\.js$/,
use: ['babel-loader'],
},
{
test: /\.ts$/,
use: ['ts-loader'],
},
],
},
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000,
stats: 'errors-only',
hot: true,
},
plugins: [
new HtmlWebpackPlugin({
title: 'App',
template: './src/index.html',
filename: 'index.html',
chunks: ['app'],
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
};Expected Behavior
Both Hot Module Replacement and Automatic Refresh should work together.
Actual Behavior
When Hot Module Replacement is enabled (by adding 'hot: true' to devServer object), webpack-dev-server Automatic Refresh. no longer works (though Hot Module Replacement does). When Hot Module Replacement is disabled (by removing "hot: true"), auto refreshing works again.
For Bugs; How can we reproduce the behavior?
Enable Hot Module Replacement and verify that Automatic Refresh no longer works.
Activity
shellscape commentedon Oct 24, 2017
@pateras thanks for checking in. when using
hot: trueor--hotyou don't need to include the plugin. see: https://github.com/webpack/webpack-dev-server/tree/master/examples/hmrCan say with all certainty that HMR works as expected on our end. Moving forward, please head to Stack Overflow or the Webpack Gitter before submitting an issue with a configuration problem.
pateras commentedon Oct 24, 2017
I'll go to Stack Overflow first in the future, but when I remove the plugin, I get an error that says "[HMR] Hot Module Replacement is disabled" on page load. Furthermore, if I include the plugin, but not the "hot: true" option, HMR is not enabled. Does that align with your expectations?
shellscape commentedon Oct 24, 2017
@pateras try running our
hmrexample first and then building your config on top of that to identify where the problem lies with your config/setup.shellscape commentedon Oct 24, 2017
I'm not sure you have a full handle on how HMR works in this context: https://webpack.js.org/configuration/dev-server/#devserver-hot. I'd also recommend being more specific in your descriptions; there are two types of refresh/reload with regard to HMR - DOM refresh/reload and page refresh/reload as a fallback. Both of these work correctly in our examples. HMR works as intended in webpack-dev-server.
If you're experiencing issues with it then you likely have an issue in your config or setup. HMR is part of the main/core webpack project. You can try to take up the issue on that project.
pateras commentedon Oct 25, 2017
I'm sure you're right. I'll take it over to Stack Overflow and try to find the issue with my configuration. Thank you for your time.
andreyvolokitin commentedon Dec 30, 2017
It seems like an old issue, which currently requires sort of a hack to probably make it working: jantimon/html-webpack-plugin#232 (comment). The issue is not about HMR (hot module replacement) — HMR is working fine, as described in the issue. The issue itself is about automatic full page refresh when HTML changes (it usually called "Live Reload", but in the issue it is called "Automatic Refresh"). So, when HMR is on — Live Reload is not working and page is not refreshing on HTML changes. Also, it can be seen in the "hmr" example : when we change
examples/.assets/layout.html— webpack compiles changes, but the page in the browser is not refreshing: https://i.imgur.com/z6E3YIb.pnggeorge-norris-salesforce commentedon Dec 3, 2018
broken link
https://github.com/webpack/webpack-dev-server/tree/master/examples/hmr