When I make a change in a component, webpack recompiles and react hot swaps the module over.. however now my code runs n
times where n
is the amount of times hot module swapping has taken place. For example, I make a change and now the functions are being run twice. I make another change, and the functions are being run three times. I can place a console.log(Date.now())
in the dispatchToken on my store and I can see it being run n
times.
Store: http://pastebin.com/PVnyf572
webpack.config.js: http://pastebin.com/MsziqH9v
and I run webpack-dev-server with webpack-dev-server app/client.js --inline --hot --colors
When I make a complicated change, I often get the follow error message (although this does not happen if I change line 60 of Store to increase the health by say, 10, instead of 6):
It appears that React Hot Loader isn't configured correctly. If you're using NPM, make sure your dependencies don't drag duplicate React distributions into their node_modules and that require("react") corresponds to the React instance you render your app with. If you're using a precompiled version of React, see https://github.com/gaearon/react-hot-loader/tree/master/docs#usage-with-external-react for integration instructions.
i think your webpack configuration is not appropriate . use this boilerplate then run your code i think your problem will be solved
https://github.com/tapos007/ReactJS-MobX-Webpack-Boilerplate
It sounds like you're hot-reloading something that has side-effects.
Webpack documentation provides a few examples to show how to handle hot reloading.
Based on your pastebin code I would guess that this is a side-effect:
this.dispatchToken = Dispatcher.register(this.onAction.bind(this))
I think you need to add module.hot
detection code to the PlayerStore
file to 'unregister' when the module is being replaced.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With