React-hot-loader: Component not accepted by Hot Loader if using react-refetch

[loris]

Hi! congrats on v3!
I have been trying to switch from react-transform-hmr to react-hot-loader@3and facing some issues. It looks like I can't get Hot Loader to properly works with components wrapped with https://github.com/heroku/react-refetch HOC (and since my parent App component is also wrapped, none on the children components are accepted)

React Hot Loader: this component is not accepted by Hot Loader. 
Please check is it extracted as a top level class, a function or a variable. 
Click below to reveal the source location: 
 ƒ RefetchConnect(props, context) {
        _classCallCheck(this, RefetchConnect);

        var _this2 = _possibleConstructorReturn(this, _Component.call(this, props, context));

        _this2.version …

It looks really related to react-refetch (my App component is wrapped with multiple HOCs using compose from recompose and hot reload properly works as soon as I remove the react-refetch HOC). Any idea?

[oliviertassinari]

I have noticed the same behavior today. For instance, I have 6 components raising this warning. Some of those components are userland, some are coming from redux-form, react-redux, Material-UI.
I have upgraded recently to react-hot-loader-3.0.0. I will rollback to the previous version to see if that help.

[oliviertassinari]

I confirm, @loris see if [email protected] fix your issue.

[gregberge]

It is new in v3, it gives you warning about component not accepted by React Hot Loader. The behaviour is the same as v3.0.0-beta.7 except you don't get any warning about not accepted components.

[anamanaguchi]

@neoziro, is there an option to disable this warning? ;)

[gregberge]

Not yet

[gregberge]

Feel free to contribute #667

[loris]

Not sure why the issue has been closed. Warnings are not the problem, the fact that reloading is not happening is. Using react-refetch in a component will make any children unreloadable.

[skipjack]

@loris I agree, though this issue is similar to #650 (and potentially some others) so maybe it was closed in favor of that one? BTW I'm seeing this issue with react-redux connected components as well so I don't think it's specific to react-refetch but more to HoC components in general.

[Iuriy-Budnikov]

I have the same issue with connect. I got it after update from 3.0.0-beta.7 to v 3.1.1. Something wrong with HOC

[nathanqueija]

I am having the same issue with connect. The warnings reaches to the number of 8000.
Sometimes chrome chrashes because it ran out of memory.

[nathanqueija]

20000 > warnings

[Panoplos]

Issue #666 ... coincidence? Because this one is certainly a beast!!
In order to comply, I would have to unwrap every single component that uses connect or recompose.
Can someone explain why this is not supported, as the composed components are not changing in most cases?

[vanderhoop]

Encountered the same. reverting to 3.0.0-beta.7 did the trick.

[luisherranz]

Exactly the same here. I also went back to beta 7.

[gregberge]

You can disable warnings https://github.com/gaearon/react-hot-loader#disable-warnings

[loris]

Any updates on this one @neoziro? Using React with HoC like redux seems like a very common setup, so currently RHL is broken for most people

[gregberge]

@loris in fact the implementation is the same as in beta. We added warnings by default and you can disable them.

Concerning support of HOC we do not have any solution yet except exporting them at top level.

[theKashey]

What about "that babel plugin"? @loris - check this out - https://github.com/gaearon/react-hot-loader/issues/650#issuecomment-335979743

[JustFly1984]

I'm also experiencing an issue with hot reloading and connected components:

[PeterKottas]

Yeah same here guys. HOCs are breaking my setup at the moment.

[jcrben]

I believe that there's a bug here where the warning fires even if the component actually is reloaded - because it's a child component in the same file. I'll see about posting a reproducible case, but can't promise it... nevermind, I'm using a dated version from a starter kit, will see what happens if I upgrade

[cescoferraro]

reverting back to beta7 indeed solves the warning issues. But, Is there anyone else having issues with HMR a redux store. I keep getting the Provider does not support changing store on the fly warning on each first hot-reload

[gregberge]

react-refetch issue is fixed in next. Also added an example using react-refetch.

[Stanko]

@neoziro thanks! I just tried next and it seems issue is fixed, but it is giving me another error, sorry if it is unrelated!

React-stand-in: Updated class  Connect(People) contains native or bound function  notifyNestedSubs ƒ notifyNestedSubs() {
    this.listeners.notify();
  } . Unable to reproduce, use arrow functions instead.

[gregberge]

Ping @theKashey

[theKashey]

@Stanko - we will remove this warning asap. This is just a warning. Everything is ok in real.

[loris]

@neoziro Thanks! Just installed next on our project and can confirm our components (event the ones exported with multiple HOCs) are properly hot reloaded!