web-dev-qa-db-fra.com

Problème de division de code/pouvant être chargé

J'essaie d'introduire la division de code dans mon application à l'aide de react-loadable. Je l'ai essayé sur un composant très simple:

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

Cependant, lorsque ce composant est rendu, j'obtiens l'erreur suivante:

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

Je ne vois rien d'évident que je me trompe, et je ne peux pas déposer de problème dans ce dépôt.

reactjscode-splittingreact-loadable
6
Steven Musumeche

Il s'avère que vous devez transmettre un composant à l'option loading et non à JSX. La documentation l'indique clairement, je viens de le manquer.

21
Steven Musumeche

Ne transmettez pas jsx à la clé de chargement du composant chargeable, fournissez un composant réactif valide.

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

Pour les gars qui sont arrivés ici parce qu'ils sont une application de rendu côté serveur (fichiers transpilés par babel serveur) crachant l'erreur ci-dessus, cela peut se produire parce que vous utilisez airbnb babel-plugin-dynamic-import-node sans définir noInterop sur false sur .babelrc comme ci-dessous: { "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }

0
Idan Gozlan