web-dev-qa-db-ja.com

コード分​​割/ react-loadableの問題

React-loadableを使用してアプリにコード分割を導入しようとしています。非常に単純なコンポーネントで試してみました。

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

自分が間違っていることを示す明らかなものは何も見当たりません。また、そのリポジトリに問題を提出することはできません。

reactjscode-splittingreact-loadable
7
Steven Musumeche

JSXではなくloadingオプションにコンポーネントを渡す必要があることがわかりました。ドキュメントにはこれがはっきりと書かれていますが、私はそれを見逃しました。

23
Steven Musumeche

LoadableコンポーネントのLoadingキーにjsxを渡さないでください。有効なreactコンポーネントを提供してください。

const LoadableComponent = Loadable({
    loader: () => import('components/Shared/Logo/Logo'),
    loading: () => <div>loading</div>, // pass component, not jsx
});
1
Sagar Gavhane

インポートするときは名前付きエクスポートを使用しないため、必ず_default exports_を使用してください：loader: () => import(/* webpackChunkName: "home" */ './Home')

1
Gustav

上記のエラーを吐き出すサーバーサイドレンダリングアプリ（サーバーバベルトランスパイルファイル）であるためにここに来た人にとっては、.babelrcでnoInteropをfalseに設定せずにairbnbbabel-plugin-dynamic-import-nodeを使用しているために発生する可能性があります以下のように：{ "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }

0
Idan Gozlan