react-redux: Error when using HMR

I recently updated react-redux@5.0.0-beta.3. After doing so I noticed that after every code change HMR would cause a full page refresh do to an error.

I looked through the stack trace and the error comes from react-redux.

Subscription.js:67 Uncaught (in promise) TypeError: this.subscribe is not a function
    at Subscription.trySubscribe (Subscription.js:67)
    at Subscription.addNestedSub (Subscription.js:53)
    at Subscription.trySubscribe (Subscription.js:67)
    at ProxyComponent.componentWillUpdate (connectAdvanced.js:246)
    at ProxyComponent.componentWillUpdate (createPrototypeProxy.js:44)
    at react.js:6605
    at measureLifeCyclePerf (react.js:5971)
    at ReactCompositeComponentWrapper._performComponentUpdate (react.js:6604)
    at ReactCompositeComponentWrapper.updateComponent (react.js:6539)
    at ReactCompositeComponentWrapper.receiveComponent (react.js:6441)

I reverted back to react-redux@4.4.5 and the error went away and HMR started working correctly again.

software	version
react	15.3.2
webpack	2.1.0-beta.25
redux	3.6.0
node	6.7.0
npm	3.10.3

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 20 (12 by maintainers)

Commits related to this issue

Fixes HMR error #513 (#567) — committed to reduxjs/react-redux by jimbolla 8 years ago
Fixes HMR error #513 (#567) — committed to webguru7/react-redux by jimbolla 8 years ago

Most upvoted comments

If you have a ref to the component, you should be able to do component.version = -1 to make the reinitialization logic happen, but I think the part that’s lost is how HMR affects the component’s lifecycle.

I’m gonna spend some time on this in a couple weeks when I’m on extended vacation. I think the test is valuable because otherwise it might break again. The problem with having a bunch of really great tests is then things that aren’t covered by them tend to be forgotten.

jimbolla on Dec 7, 2016

I just added PR #567 which fixes this. Thanks @patrikholcak and @restrry.

jimbolla on Dec 10, 2016

I can’t share the repo that the error is happening with, but I am trying to create an other one to reproduce the issue.

theverything on Oct 7, 2016

Basically, Subscription.tryUnsubscribe was clearing this.subscribe so then it was null when the component tried to resubscribe when HMR was detected. I removed the clearing and refactored a little for clarity.

jimbolla on Dec 10, 2016

You might look at how webpack does it. But it is pretty complex and I don’t know if adding that to our infrastructure would be a good use of time. Better to spot test that on your own.

If it’s of any comfort, it’s not an end-user feature anyways. So, the impact of fixing it does have a relatively limited audience. Not to say it’s not important, just that you’re not going to break everyone’s app/site because of it 😃

timdorr on Dec 5, 2016