Skip to content

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

New issue
New issue
Closed
Closed
react-hot-loader v1.3.0 stopped working after upgrade to webpack 2.2.1#474
@w-

Description

@w-
w-
opened on Feb 3, 2017 · edited by 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.

Activity

hugorodrigues

hugorodrigues commented on Feb 9, 2017

@hugorodrigues
hugorodrigues
on Feb 9, 2017

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

w-

w- commented on Feb 10, 2017

@w-
w-
on Feb 10, 2017
Author

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

hugorodrigues commented on Feb 10, 2017

@hugorodrigues
hugorodrigues
on Feb 10, 2017 · edited by hugorodrigues

That guide specifically ask you to install react-hot-loader@3.0.0-beta.6and 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-

w- commented on Feb 10, 2017

@w-
w-
on Feb 10, 2017
Author

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

thanks

w-

w- commented on Feb 17, 2017

@w-
w-
on Feb 17, 2017
Author

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

wkwiatek commented on Feb 19, 2017

@wkwiatek
wkwiatek
on Feb 19, 2017
Collaborator

@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).

wkwiatek
closed this as completedon Feb 19, 2017
w-

w- commented on Feb 20, 2017

@w-
w-
on Feb 20, 2017
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @hugorodrigues@w-@wkwiatek

        Issue actions
          react-hot-loader v1.3.0 stopped working after upgrade to webpack 2.2.1 · Issue #474 · gaearon/react-hot-loader