react-hot-loader v1.3.0 stopped working after upgrade to webpack 2.2.1

[w-]

Is react-hot-loader v1.3.0 supposed to work with webpack 2.2.1?
if it is, i'll go to the effort of making a project

Description

Previously had react-hot-loader v1.3.0 configured and working with webpack v1.14.0 along with webpack-dev-server v1.16.3
upgraded webpack to v2.2.1 and react-hotloader stopped working.
By stopped working i mean:

• i make a change in source (either css or jsx file)
• webpack starts a new build
• console shows that it received a message that app is recompiling
• console shows app up to date
• DOM did not change.

I must manually refresh the page to see my changes.

here is my server.js and relevant webpack config
server.js

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.dev.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    inline: true,
    historyApiFallback: true,
})
.listen(15556, '0.0.0.0', (err, result) => {
    if (err) {
        console.log(err);
    }

    console.log('Listening at 0.0.0.0:15556');
});

relevant bits of webpack.config

 entry: {
    thing: ['./src/index.jsx', 'webpack/hot/only-dev-server', 'webpack-dev-server/client?http://ashina.blk:15556']
}
//...
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
],
//.....
module:{
    rules:{
    //......
     {
        test: /\.js[x]*$/,
        exclude: /(node_modules|bower_components)/,
        use:[ 
              {loader: 'react-hot-loader'},             
              {loader: 'babel-loader',
               options: {presets: ['es2015', 'react',],
                         plugins: ['transform-decorators-legacy',
                                    'babel-plugin-transform-class-properties'],
                        },
              },
        ]    
      },

What you are reporting:

Expected behavior

What you think should happen:
For changes i make in source to be reflected in DOM.

Actual behavior

What actually happens:
I must manually refresh the page to see my changes.

Environment

React Hot Loader version:

Run these commands in the project folder and fill in their results:

1. node -v: 7.5.0
2. npm -v: 4.1.2

Then, specify:

1. Operating system:
   Ubuntu 14.04.4

2. Browser and version:
   latest chrome

Reproducible Demo

Please take the time to create a new project that reproduces the issue.

You can copy your project that experiences the problem and start removing things until you’re left with the minimal reproducible demo. This helps contributors, and you might get to the root of your problem during that process.

Push to GitHub and paste the link here.

[hugorodrigues]

I believe you have to use the v3 (beta) to use webpack2.
Check this guide https://webpack.js.org/guides/hmr-react/

[w-]

thanks @hugorodrigues . I checked out the link but it doesn't seem to specify anything about v3 explicitly?
are the docs on that page assuming v3 ?

[hugorodrigues]

That guide specifically ask you to install [email protected]and it will probably break if you install something less-than 3. You can install the react-hot-loader@next tho, which is the branch that always contain the latest 3.0 (beta) release.

[w-]

ah ok. i totally did not read the line in the guide talking about installing via npm.

thanks

[w-]

Ok so i finally found the time to get this working. kind of. the remaining issue is that if there is an error, the hot reload breaks again with this error in console

Ignored an error while updating module

This happens even after you fix the error.
If anyone knows what else I'm doing wrong here and can provide guidance please help.

------------ REFERENCE ---------------------------------------------------

For those seeing this post and looking for answers, the guide @hugorodrigues references above is correct. Here are some specific things I had to pay special attention to:

1. Make sure your webpack-dev-server AND webpack are both updated. at time of writing this is what i've got

"react-hot-loader": "^3.0.0-beta.6",
"webpack-dev-server": "^2.3.0",
"webpack": "^2.2.1",

2. in the webpack config for entry, 'react-hot-loader/patch' needs to be the first item.
https://webpack.js.org/guides/hmr-react/#webpack-config

3. if you are using babel but not a .babelrc file (i.e. you define your babel-loader settings in webpack config, this is how mine looks. pay specific attention to the first preset

 {
        test: /\.js[x]*$/,
        exclude: /(node_modules|bower_components)/,
        use:[               
              {loader: 'babel-loader',
               options: {presets: [['es2015', {'modules': false}],
                                   'react', ],
                         plugins: ['transform-decorators-legacy',
                                    'babel-plugin-transform-class-properties',
                                    'react-hot-loader/babel'],
                        },
              },
        ]    
 }

4. For each of my react applications have to add the code as described here:
https://webpack.js.org/guides/hmr-react/#code

[wkwiatek]

@w- Thanks for the guide here! I believe it will be helpful for people that are looking for answers in this thread. I'm going to close the issue right now as RHL 1.x is not going to work with webpack 2. However, you can switch to v3 (currently in beta).

[w-]

@wkwiatek no worries. I hope it helps.

I'm going to close the issue right now as RHL 1.x is not going to work with webpack 2. However, you can switch to v3 (currently in beta).

In case it wasn't clear, I did switch to the v3. (i did npm install webpack@next as per the guide).
Some feedback, my current experience was that existing documentation wasn't clear regarding RHL 1.x not working with webpack 2 and the migration path was not obvious (at least to me) even after going through available docs.