Webpack-dev-server: Hmr don't work in webpack 4

[hopperhuang]

• Operating System: macos 10.13.3 (17D47)
• Node Version: 8.9.3
• NPM Version:5.5.1
• webpack Version:4.5.0 && 4.0.0 beta1
• webpack-dev-server Version:3.1.3

• [x] This is a bug

Code

i'd like to provide the resposity: https://github.com/webpack/webpack-dev-server/tree/master/examples/api/middleware

// change config in server.js
// set hot to true
  const devServerOptions = Object.assign({}, webpackConfig.devServer, {
+  hot: true,
    stats: {
      colors: true
    },
    before(app) {
      app.use((req, res, next) => {
        console.log(`Using middleware for ${req.url}`);
        next();
      });
    }
  });

Expected Behavior

change code in app.js, the hmr will work.
changes below:

-   target.innerHTML = 'Scuccess!';
+  target.innerHTML = 'webpack!';

hmr is expected to run and the html will rerender

Actual Behavior

hmr not run

For Bugs; How can we reproduce the behavior?

see above

For Features; What is the motivation and/or use-case for the feature?

enable hmr with api usage in webpack 4

[theKashey]

Could not get HRM working with v3.1.3. After enabling hot - everything stops updating. Also could not saw any "[HRM enabled]" string in console.
https://github.com/gaearon/react-hot-loader/issues/934

[llioor]

It didn't work for me as well.... Check out those steps and it will work: https://webpack.js.org/guides/hot-module-replacement/

[alexander-akait]

@hopperhuang problem still exists?

[hopperhuang]

@evilebottnawi i check it just now, this promble still remains...

[SaekiRaku]

I have the same problem. 😕

[indefinitelee]

same issue. I add a simple console.log or small text change and updated code is not displayed

not sure why there is a 2 next to the first WDS though.

webpack: 4.8.3
webpack-dev-server: ^3.1.4

my webpack setup
//webpack.common.js

const webpack = require("webpack");
const path = require("path");
const srcPath = path.join(__dirname, "/src");

module.exports = {
    plugins: [
        new webpack.DefinePlugin({
            "process.env": {
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
    ],
    module: {
        rules: [
            {   test: /\.js$/,
                exclude: /node_modules/,
                include: srcPath,
                use: {
                loader: "babel-loader",
                }
            },
        ]
    },
    optimization: {
        noEmitOnErrors: true // as an aside not sure if this is needed in webpack 4 or is default
    }

//webpack.dev.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const path = require("path"); 
const common = require('./webpack.common.js');
const publicPath = "/assets/";

module.exports = merge(common, {
    mode:'development',
    entry: [ 'webpack-dev-server/client?http://localhost:8000',
        'webpack/hot/only-dev-server', 
        './src/index'
    ],
    output: {
        path: path.join(__dirname, '/../dist/assets'),
        filename: 'app.js',
        publicPath: publicPath
    }, 
    devServer: {
        contentBase: "./src/",
        historyApiFallback: true,
        hot: true,
        port: 8000,
        publicPath: publicPath,
        noInfo: false,
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Methods": "POST, GET, PUT, DELETE, OPTIONS"
        }
    },
  cache: true,
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'eval-source-map', 
});

[shahen94]

+1 Same

[indefinitelee]

my log.js is showing this error.

don't know what 'unaccepted module' means, or why it requires a full reload - i'm just adding some text to see if it reloads.

Ignored an update to unaccepted module ./src/components/Main/index.js -> ./src/components/MarketAnalysis/index.js -> ./src/containers/MarketAnalysis.js -> ./src/components/MarketAnalysis/Marketplace.js -> ./src/index.js -> 0
2
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
2
[HMR] - ./src/components/Main/index.js

[twinkle77]

+1 Same

[indefinitelee]

@bartdominiak I thought this might be the solution because it seems like only my reducers files are being reloaded. But doing so gives me these errors:

<Provider> does not support changingstoreon the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

my setup matches the pattern described at that link, and has not changed for a while.

Warning: [react-router] You cannot change <Router routes>; it will be ignored

I still get a warning that the file that contains the module.hot code is an unaccepted module.

[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR]  - ./src/stores/index.js

[bastienrobert]

Same here, any updates @hopperhuang ?

[hopperhuang]

@bastienrobert nothing changes.

[indefinitelee]

This is pretty frustrating.

[bastienrobert]

By adding two entrypoints (like @indefinitelee comment), it works pretty well. The entrypoints are:

'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server'

Because I'm using the API, I think this is a pretty good solution in my start.js script used to start my dev env:

config.entry = [
  'webpack-dev-server/client?http://localhost:8080',
  'webpack/hot/dev-server',
  ...config.entry
]

just after the config import.

Edit (04/2019): I just read back this comment, it may not be clear. Here is how I did it : https://github.com/bastienrobert/halo/blob/master/scripts/start.js (I'm editing my Webpack config from an external script, it's maybe why I look like a circular reference)

[BeliefRC]

if you use React, you can see react-hot-loader doc

[indefinitelee]

@bastienrobert if I only use those two entry points, and don't include 'src/index.js' then nothing loads, just a blank screen.

i'm confused by your example, is ...config.entry referencing itself?

i'm seeing that my app is intially loaded via app.js and code changes exist in main.[hash].js but those are never displayed, it only displays app.js https://imgur.com/a/9FzSb2W

[bastienrobert]

@indefinitelee You need to add these two entry points before your app index.js in the entry points array.

My example is only for the webpack-dev-server API and for advanced use. Here I’m using the spread operator.

[indefinitelee]

@bastienrobert I have those two in my entry array as well as the root of my project as seen in my earlier post

I’m confused how you can use the spread on config.entry inside of itself. It looks like a circular reference.

config.entry = [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
...config.entry
]

[bastienrobert]

Ok, it seems you’re not using the API so it should look like that:

config.entry = [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'src/index.js'
]

If you’re curious, there’s some references about the API in the doc.

[michael-ciniawsky]

i'm going to close issues as it seems folks mainly have issue with configurating HMR 'correctly' for there setup(s), please go to https://webpack.js.org/ for more information on how to do so

Anyone with a concrete issue and a repo, feel free to open a new issue instead :)

[chocking]

@bastienrobert

Ok, it seems you’re not using the API so it should look like that:

config.entry = [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'src/index.js'
]

i feel a little confused that it's no need to add two lines 'webpack....' into entry if using npm script like

//package.json
...
"scripts": {
     "start": "webpack-dev-server"
 }
...

npm start

[bastienrobert]

Nope, you’re right but here you’re using the webpack-dev-server CLI with an alias, not the webpack-dev-server API !

[ohkatesroad]

I met the same problem as yours. The example code for me is here: https://github.com/pandoracat/webpack-demos/tree/master/demos/09.hot-module-reload.03.hrm

Someone, please help me, it haunted me for a very long time.

[wuliqiangqiang]

@hopperhuang @bastienrobert
are you fix it? how do....sos

[BeSaRa]

Any solution here Please !??

[bastienrobert]

@BeSaRa Several solutions have already been explained above. Please add more details if these solutions are not adequate.

[BeSaRa]

all applied but nothing work with me.

and actually after a long time i catch the reason of that, when i add copy-webpack-plugin to the plugins property, the HMR not working.
should i open issue here or in copy-webpack--plugin !!??

[bastienrobert]

@BeSaRa Did you check https://github.com/webpack-contrib/copy-webpack-plugin/issues/270 ? You can still re-open it

[devrsi0n]

I got

Ignored an update to unaccepted module...[HMR] The following modules couldn't be hot updated: (They would need a full reload!)

warning too, I fixed this issue by replacing webpack config devServer.hotOnly: true to devServer.hot: true.

[totymedli]

My warning looked like this:

Ignored an update to unaccepted module ./scenes/Home/components/Counter/Counter.js -> ./scenes/Home/components/Counter/index.js -> ./scenes/Home/Home.js -> ./scenes/Home/index.js -> ./index.js -> 1

This shows the component hierarchy the hot update event bubbles up. The problem was that nothing was listening to this event. I had to pass one of the files' path mentioned in the warning as a parameter to module.hot.accept. According to the docs on accept(dependencies, callback):

The dependency string must match exactly with the from string in the import.

I had to write something like this:

if (module.hot) {
  module.hot.accept('./scenes/Home/index.js', () => {
    render()
  })
}