CODEWITHSUNDEEP
reactjscode-splittingreact-loadable
Steven Musumeche
Steven Musumeche

Reputation: 2936

Code splitting/react-loadable issue

I'm trying to introduce code splitting into my app using react-loadable. I tried it on a very simple component:

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

However, when this component is rendered, I get the following error:

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

I don't see anything obvious that I'm doing wrong, and I'm unable to file an issue in that repo.

Upvotes: 9

Views: 8795

Answers (4)

Gustav
Gustav

Reputation: 2940

Make sure to use default exports since when you import it's not using named exports: loader: () => import(/* webpackChunkName: "home" */ './Home')

Upvotes: 3

Idan Gozlan
Idan Gozlan

Reputation: 3203

For the guys who got here because they're server side rendering app (server babel transpiled files) spitting out the error above, it may happen because you are using airbnb babel-plugin-dynamic-import-node without setting noInterop to false on .babelrc as below: { "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }

Upvotes: 1

Sagar
Sagar

Reputation: 4957

Don't pass jsx to loading key to Loadable component, provide valid react component.

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

Upvotes: 2

Steven Musumeche
Steven Musumeche

Reputation: 2936

Turns out that you need to pass a component to the loading option and not JSX. The documentation clearly says this, I just missed it.

Upvotes: 24

Related Questions