Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
w- opened this issue Feb 3, 2017 · 7 comments
Closed

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

w- opened this issue Feb 3, 2017 · 7 comments

Comments

@w-
Copy link

w- commented Feb 3, 2017 •
edited

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
Copy link

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

@w-
Copy link
Author

w- commented Feb 10, 2017

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
Copy link

hugorodrigues commented Feb 10, 2017 •
edited

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-
Copy link
Author

w- commented Feb 10, 2017

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

thanks

@w-
Copy link
Author

w- commented Feb 17, 2017

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
Copy link
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).

@w-
Copy link
Author

w- commented Feb 20, 2017

@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
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@hugorodrigues @w- @wkwiatek