React Hot Loader v3. this component is not accepted by Hot Loader

Question

I've updated react-hot-loader to v.3.0.0 and when I change something in component I get updates in the browser but I also get this warning in the console:

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:

The problem is I'm not seeing anything in the stack which would suggest me where is the error.

webpack entry

client: [
  'react-hot-loader/patch',
  'webpack/hot/only-dev-server',
  'wicg-focus-ring',
  PATHS.clientBundleEntry,
],

eslint

"plugins": [
    "react-html-attrs",
    "transform-runtime",
    "transform-class-properties",
    "styled-jsx-postcss/babel",
    "react-hot-loader/babel"
  ]

client.jsx

function render() {
  ReactDOM.render(
    <AppContainer>
      <Provider store={store}>
        <BrowserRouter>
          {app}
        </BrowserRouter>
      </Provider>
    </AppContainer>,
    document.getElementById('app'),
  );
}

render();
if (module.hot) {
  module.hot.accept('./app', () => { render(); });
}

EDIT:

I have changed:

export default withRouter(
  connect(
    (state: ReduxState) => ({
      error: state.requestState.loginError,
    }),
    { loginUser },
  )(LoginContent),
);

into:

const withRouterLoginContent = withRouter(LoginContent);
export default connect(
  (state: ReduxState) => ({
    error: state.requestState.loginError,
  }),
  {
    loginUser,
  },
)(withRouterLoginContent);

... and it helped in some cases. Not sure what's the difference though.

Answer 1

I experienced this same problem and was able to solve it by not using "functional composition" to combine multiple higher-order-components, as described in React Hot Loader's Troubleshooting Guide.

Their "solution" at the bottom of the page fixed the warning for me. Reproduced here, it's a matter of converting:

const SuperComponent = 
     connect()(         <-- last HoC
       withSomeStuff(   <-- first HoC
         Component      <-- a real component
       )
     );

To:

const WithSomeStuffComponent = withSomeStuff(Component);
const SuperComponent = connect()(WithSomeStuffComponent);