CODEWITHSUNDEEP
javascriptnode.jsreactjswebpack-dev-serverreact-hot-loader
bitten
bitten

Reputation: 2533

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

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.

Upvotes: 5

Views: 912

Answers (2)

searlea
searlea

Reputation: 8378

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.

Upvotes: 1

tapos ghosh
tapos ghosh

Reputation: 2202

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

Upvotes: 3

Related Questions