React-hot-loader: Warning: setState(...): Can only update a mounted or mounting component

[didierfranc]

Description

Any idea why I'm getting this when hot reloading happened ?

Expected behavior

To not have this error

Actual behavior

Everything seems fine but console log errors like that 👆

Environment

React Hot Loader version: 3.0.0-beta.6

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

yarn && yarn start

1. Operating system: macOS
2. Browser and version: Chrome 54

Reproducible Demo

Run the project, editing some code from this https://github.com/didierfranc/redux-react-starter and error appear on stateful components.

[calesce]

This error is usually caused by #313, but it looks like you have the es2015 preset. I'll try running your project later today and see what's going on.

[didierfranc]

Solved https://github.com/didierfranc/redux-react-starter/commit/e66ab1f3e5be6558f537632529c3e7a5b054b813

It seems that render should be equal here

render()

and

module.hot.accept('../src', render)

I did not want to have <AppContainer /> in my prod bundle so I needed to split that, the solution is :

if (!module.hot) render(<Root />, document.querySelector('react'))

at the root of my project, if you have better solution I'll take it !

[ianks]

@didierfranc I tried this and although the error is gone, hot reloading is not working. Did you experience this at all?

[penx]

I had this issue when trying to switch from babel-preset-es2015 to babel-preset-env. Adding transform-es2015-classes to the included transforms resolved it for me:

presets: [
  ['env', {
    targets: {
      chrome: 60
    },
    include: ['transform-es2015-classes']
  }],
  'stage-1',
  'react'
],
plugins: ['react-hot-loader/babel']

[Koenkk]

@penx thanks! It solved the problem in my case. 😄

[edorivai]

Just leaving a note for fellow Typescript googlers. A TS equivalent of @penx's babel solution would be:

// tsconfig.json
{
    "compilerOptions": {
        "target": "es5"
    }
}

[theKashey]

The root cause - arrow functions. You have to avoid them yet.

[manishoo]

@penx thanks! you saved my week!

[theKashey]

Everyone - version 4 solves this. Update today.

[vkosovskikh]

Same problem with version 4.0.0-beta.18 of react-hot-loader. Error occurs when I save some changes on component and change route by clicking a button. Any help?
.babelrc:
```
presets: [
['es2015', { modules: false }],
'stage-0',
'react'
],
plugins: [
'react-hot-loader/babel'
]
````

[theKashey]

@vkosovskikh, gonna to fix this in next release.
Keep in mind - this is not an errors, just a warning.

[gregberge]

@theKashey yes but this is very very annoying. In a big application it is a ton of warnings.

[theKashey]

One warning for a one component 🤷‍♂️

[theKashey]

@vkosovskikh - could you try the last beta version?

[ivankoleda]

@theKashey had the same issue just now with version 4.0.0-beta.21, updating for 4.0.0-beta.22 solved the problem

[vkosovskikh]

@theKashey seems solved, ty

[Cottin]

I've been trying to research this for a while now and I'm still getting this warning. Is it just me?

https://github.com/Cottin/some-boilerplates/tree/master/react-hot-warning
If somebody wants to reproduce, I made a minimal example above.

[theKashey]

@Cottin - here is an explanation

class Hello extends React.Component {
  constructor(props) {
    super(props)
    this.state = {name: '...'};

    this.getNameAndSet = this.getNameAndSet.bind(this)

    this.getNameAndSet() <-- will be executed on Class(Component) creation
  }
  getNameAndSet() {
    console.log(this)
    setTimeout((() => this.setState({name: 'Worrrld'})), 100) <-- will _always_ be fired
  }

During update RHL trying to undertand wich changes were made, and creating an old and a new class to compare them.
Creating, and throwing away, not adding to the tree.

You shall not trigger state change mechanics in the constructor. Move this logic to componentDidMount.

[Cottin]

@theKashey Thanks a lot for explanation! Works great with componentDidMount!