React-hot-loader: Warnings when using react-redux connect

[oscar-broman]

Description

When debug logging is enabled, warnings are generated when reloading a component that uses both hot and connect.

Environment

React Hot Loader version: 4.3.4

Run these commands in the project folder and fill in their results:

1. node -v: v10.8.0
2. npm -v: 6.3.0

Then, specify:

1. Operating system: macOS 10.13.6
2. Browser and version: Chrome 68.0.3440.106

Reproducible Demo

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { setConfig } from 'react-hot-loader';
import { createStore } from 'redux';

import Test from './Test';

setConfig({ logLevel: 'debug' });

const store = createStore((state = {}) => state);

// Wrap the rendering in a function:
ReactDOM.render(
  <Provider store={store}>
    <Test />
  </Provider>,
  document.getElementById('root')
);

Test.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { hot } from 'react-hot-loader';

class Test extends Component {
  render() {
    return <div>Test</div>;
  }
}

export default hot(module)(connect()(Test));

Console output after performing change

React Hot Loader:, Non-controlled class Connect(Test) contains a new native or bound function  setWrappedInstance ƒ setWrappedInstance(ref) {
        this.wrappedInstance = ref;
      } . Unable to reproduce

Way to do it that does not cause this warning

// Change bottom of Test.js
export default hot(module)(Test);

// Create TestRedux.js and use it in place of Test.js
import { connect } from 'react-redux';
import { hot } from 'react-hot-loader';

import Test from './Test';

export default connect()(Test);

[theKashey]

That's not a bug - that's a feature of RHL v4.
RHL's babel plugin was not extended to your node_modules directory, thus RHL has no power upon classes defined there.

Meanwhile - everything is working, RHL just reporting that it could not do some replacements, but they are not needed for redux.

You can ignore this message(change logLevel), or remove it using cold API (but I have another issue related to it, so wait a bit before use)

[shahzaibkhalid]

@theKashey In my case, I'm getting the same error and connected components (i.e. dumb components) are not hot-loaded.

react-hot-loader: 4.6.3

[theKashey]

@shahzaibkhalid - should work if _pre-connected_ part exists as a separate variable. That's also a good idea for better testing.
This root cause of this issue soon will be resolved - #1138

[shahzaibkhalid]

Yeah. In this case, I realized that the issue was with React-Redux and as I downgraded from v6.0.0 to v5.1.1, it started working.

[wenjoy]

Yeah. In this case, I realized that the issue was with React-Redux and as I downgraded from v6.0.0 to v5.1.1, it started working.

Thanks buddy, you save my day.

[theKashey]

Would be fixed in react-redux v6.0.1 - https://github.com/reduxjs/react-redux/pull/1168