React Hot Loader v3.Hot Loader不接受此组件

Question

我已更新react-hot-loader到v.3.0.0,当我在组件中更改某些内容时,我在浏览器中获得更新,但我也在控制台中收到此警告:

React Hot Loader:Hot Loader不接受此组件.请检查它是作为顶级类,函数还是变量提取的.点击下方显示源位置:

问题是我没有在堆栈中看到任何表明我在哪里出错的东西.

webpack条目

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(); });
}

编辑:

我改变了:

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

成:

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

......在某些情况下它有所帮助.不知道有什么区别.

Answer 1

我遇到了同样的问题,并且能够通过不使用"功能组合"来组合多个高阶组件来解决它,如React Hot Loader故障排除指南中所述.

他们在页面底部的"解决方案"为我修复了警告.转载于此,这是转换的问题:

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

至:

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