reactjs - React 热加载器 v3. Hot Loader 不接受该组件

Question

我已将 react-hot-loader 更新为 v.3.0.0，当我更改组件中的某些内容时，我会在浏览器中获得更新，但我也得到了这个控制台中的警告:

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:

问题是我在堆栈中没有看到任何可以提示我错误在哪里的内容。

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

我遇到了同样的问题，并且能够通过不使用“功能组合”来组合多个高阶组件来解决它，as described in React Hot Loader's Troubleshooting Guide .

他们在页面底部的“解决方案”为我修复了警告。转载到这里，就是转换的问题:

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

致:

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