Code splitting/react-loadable issue

Question

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.

Steven Musumeche · Accepted Answer · 2017-11-17 17:20:58Z

24

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.

answered Nov 17, 2017 at 17:20

Steven Musumeche

2,9465 gold badges35 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prem Over a year ago

I implemented code splitting (react-loadable) with the help of this tutorial youtu.be/AR5GSZuox1k

Long Nguyen Over a year ago

For more detail: loading: () => <div>loading</div>

Gustav · Accepted Answer · 2019-03-18 18:47:08Z

3

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

answered Mar 18, 2019 at 18:47

Gustav

2,9401 gold badge27 silver badges31 bronze badges

Comments

Sagar · Accepted Answer · 2018-10-10 12:07:51Z

2

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
});

edited Oct 10, 2018 at 12:07

answered Oct 7, 2018 at 18:25

Sagar

4,9773 gold badges35 silver badges41 bronze badges

Comments

Idan Gozlan · Accepted Answer · 2018-12-15 01:39:49Z

1

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 }] ] }

answered Dec 15, 2018 at 1:39

Idan Gozlan

3,2033 gold badges33 silver badges48 bronze badges

Collectives™ on Stack Overflow

Code splitting/react-loadable issue

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related