Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

hot loader duplicating code (n times) instead of hot swapping

Tags:

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.

like image 512
bitten Avatar asked Jul 09 '16 10:07

bitten


2 Answers

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

like image 124
tapos ghosh Avatar answered Sep 28 '22 03:09

tapos ghosh


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.

like image 33
searlea Avatar answered Sep 28 '22 02:09

searlea