React Hot Loader v3. thành phần này không được chấp nhận bởi Hot Loader

Question

Tôi đã cập nhật react-hot-loader để v.3.0.0 và khi tôi thay đổi một cái gì đó trong thành phần tôi nhận được thông tin cập nhật trong trình duyệt nhưng tôi cũng nhận được cảnh báo này trong bảng điều khiển

Phản ứng Loader Hot: thành phần này không được Hot Loader chấp nhận. Vui lòng kiểm tra xem nó có được trích xuất dưới dạng lớp cấp cao nhất, hàm hay biến số . Nhấp vào bên dưới để tiết lộ vị trí nguồn:

Vấn đề là tôi không thấy bất kỳ thứ gì trong ngăn xếp đề xuất lỗi của tôi ở đâu.

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

EDIT:

Tôi đã thay đổi:

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

thành:

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

... và nó giúp trong một số trường hợp. Không chắc chắn những gì là sự khác biệt mặc dù.

Answer 1

Tôi đã gặp phải sự cố tương tự này và có thể giải quyết vấn đề này bằng cách không sử dụng "thành phần chức năng" để kết hợp nhiều thành phần bậc cao hơn, as described in React Hot Loader's Troubleshooting Guide.

"Giải pháp" của họ ở cuối trang đã khắc phục cảnh báo cho tôi. Sao chép ở đây, đó là một vấn đề chuyển đổi:

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

Để:

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