Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error when using HMR

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:20 (12 by maintainers)

Top GitHub Comments

3reactions

jimbollacommented, Dec 7, 2016

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.

2reactions

jimbollacommented, Dec 10, 2016

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

Top Results From Across the Web

Uncaught Error: [HMR] Hot Module Replacement is disabled

I use webpack-merge to share configuration between branches (disclaimer: I'm ... HotModuleReplacementPlugin is required to fully enable HMR.

Error in web console when using HMR · Issue #20855 - GitHub

An error appear in console when trying to use HMR from a new application (or old after ng update..) in angular 12. The...

Hot Module Replacement - webpack

err : the error thrown by the callback in second argument or during dependency execution when using ESM dependencies. moduleId : the current...

HMR API - Vite

'vite:invalidate' when a module is invalidated with import.meta.hot.invalidate(); 'vite:error' when an error occurs (e.g. syntax error). Custom HMR events can ...

[resolved] [user-error] React-fast-refresh && HMR

It is difficult to debug HMR issues. If you can create a reproduction, it would be much easier to look into what is...