2017-11-17 5 views
2

私は、反応読み込み可能なアプリケーションを使用してコード分割を導入しようとしています。私は非常に単純なコンポーネントでそれを試してみました:コード分割/反応ロード可能な問題

const LoadableComponent = Loadable({ 
    loader:() => import('components/Shared/Logo/Logo'), 
    loading: <div>loading</div>, 
}); 

このコンポーネントがレンダリングされるときしかし、私は次のエラーを取得:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. 

Check the render method of `LoadableComponent`. 
    in LoadableComponent (created by AppHeader) 
    in div (created by AppHeader) 
    in AppHeader (created by PlainChatApp) 
    in div (created by PlainChatApp) 
    in PlainChatApp (created by DragDropContext(PlainChatApp)) 
    in DragDropContext(PlainChatApp) (created by Connect(DragDropContext(PlainChatApp))) 
    in Connect(DragDropContext(PlainChatApp)) 
    in Provider 
    in AppContainer 
    in ErrorBoundary 

The above error occurred in the <LoadableComponent> component: 
    in LoadableComponent (created by AppHeader) 
    in div (created by AppHeader) 
    in AppHeader (created by PlainChatApp) 
    in div (created by PlainChatApp) 
    in PlainChatApp (created by DragDropContext(PlainChatApp)) 
    in DragDropContext(PlainChatApp) (created by Connect(DragDropContext(PlainChatApp))) 
    in Connect(DragDropContext(PlainChatApp)) 
    in Provider 
    in AppContainer 
    in ErrorBoundary 

を私が間違ってやっていることは明白で何も表示されません。私はそのレポに問題を提出することができません。

答えて

5

JSXではなくloadingオプションにコンポーネントを渡す必要があることが分かります。ドキュメントは明らかにこれを言います、私はそれを逃したばかりです。

+0

私は、このチュートリアルの助けを借りてコード分割(反応ロード可能)を実装しました。https://youtu.be/AR5GSZuox1k – Prem

関連する問題