React-hot-loader: Hot updates not applied

[egorovli]

I'm currently experiencing a weird behavior, hot updates stopped working in my project some commits ago, and I can't figure out what caused it. Currently I'll ask a quick question in case anyone knows, if not, I'll try to reproduce it in an isolated environment.

Ok, everything seemed to work, but now hot updates stopped applying, however, console says that it's working:

I'm using "react-hot-loader": "^3.0.0-beta.6", serving files from "webpack-dev-server": "^2.4.5":

// ...
entry: {
  admin: [
    'babel-polyfill',
    ...(env.dev ? [
      'react-hot-loader/patch'
    ] : []),
    './admin/polyfills.js',
    './styles/admin.scss',
    './admin/index.js'
  ],
  client: [
    'babel-polyfill',
    ...(env.dev ? [
      'react-hot-loader/patch'
    ] : []),
    './client/polyfills.js',
    './styles/client.scss',
    './client/index.js'
  ]
},
output: {
  path: distPath,
  filename: env.prod ?
    'js/[name].[chunkhash:5].min.js' :
    'js/[name].js',
  publicPath: 'http://localhost:8081/dist/'
},
devServer: {
  hot: true,
  compress: true,
  overlay: true,
  port: 8081,
  headers: {
    'Access-Control-Allow-Origin': '*'
  }
}
// ...

So basically all files are there at http://localhost:8081/dist/js/admin.js and client.js (entry points), all hot updates are there, as well, client app knows it should update and what updates should be applied (see screenshots of the console above), but nothing changes in the browser.

Any help is very much appreciated.

[egorovli]

Ok, I've created a simplified repo of my project: https://github.com/egorovli/react-hmr-test
Video of hot updates not applied: https://www.dropbox.com/s/uuav7tpz9d1l35s/HMR%20Not%20Working.mov?dl=0

[egorovli]

This one is related: https://github.com/webpack/webpack-dev-server/issues/100

I managed to fix the issue by changing

if (module.hot) {
  module.hot.accept('./containers/Root', () => render(Root));
}

to

if (module.hot) {
  module.hot.accept('./containers/Root', () => render(require('./containers/Root').default));
}

Not sure if it's an intended behavior. https://github.com/gaearon/react-hot-boilerplate and https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate both use this syntax, as well as official docs https://github.com/gaearon/react-hot-loader/tree/master/docs:

if (module.hot) module.hot.accept('./App', () => render(App));

[egorovli]

Or you can use:

if (module.hot) {
  module.hot.accept();
}

But in my case this was throwing errors about store. In non-redux environment, like mobx, it works fine.

[codingwesley]

    const reactAppContainer = document.getElementById('reactAppContainer')
    if (module.hot) {
        module.hot.accept() // this is important
        ReactDOM.render((<AppContainer><MainPage /></AppContainer>), reactAppContainer)
    } else {
        ReactDOM.render((<AppContainer><MainPage /></AppContainer>), reactAppContainer)
    }

appContainer use this. and setting with migration-to-3.0

[chrisregner]

Another case that may cause this is not having the react-hot-loader/babel babel plugin as the first element of array in the config file. @gaearon, is this behavior normal? If so I'd like to make a PR on documentation so that fewer people get tripped over this (I kinda spent plenty of time just because of this).

[tvedtorama]

@egorovli I spent hours to trying to get my rhl 3 update to correctly apply edits, then your solution with module.hot.accept() worked. The recommended way, with module.hot.accept(path, callback) failed silently - with "Component does not know how to update itself". I think there must be something about the relative paths or anything in my typescript setup that fails it.

Is there any documentation/links on what this does, exactly - since we don't get the chance to explicitly call the render function again? Apart from the very annoying store error, are there any other disadvantages to using this simple syntax?

UPDATE: I had an old version of the webpack-hot-middleware, this was most likely the cause of my problems.

[vladimirdh]

@egorovli this also works for me, with react v16 and webpack v3

[gregberge]

Clarified in https://github.com/gaearon/react-hot-loader#getting-started

[yuqingc]

@egorovli Thanks so much for your solution. I solved this problem with the help of your _require_ and _default_ solution. Do you know how that happened? Is there some error about the babel config?

[yofi2tofi]

@egorovli thank you so muck. I don't know why, but i had wrong behavior when set code like of. doc

[dangdennis]

Wow @egorovli

I entered a new project recently, and noticed that our HMR wasn't working properly. No idea why, thought it might've been the way browsersync was set up.

Regardless, simply using

 if (module.hot) {
  module.hot.accept();
}

did the trick. Still haven't figured out why though.

[tommyalvarez]

@egorovli your solution also worked for me. Using React 16.3 and webpack v4.

[theKashey]

@dangdennis - that might be due to a bug in React-Hot-Loader v4, when it does nothing without babel (#923)

[WangYang-Rex]

how to use 'AppContainer' with 'react-router' and 'redux‘ together?

[theKashey]

Always use just hot.

[WangYang-Rex]

can you provide some example?

[theKashey]

Any our example - just wrap with hot some component "just before" react-dom render, and it should be an export of another file