代码拆分/反应可加载问题

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.

Answer 1

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.

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

Answer 3

对于那些来到这里的人，因为他们是服务器端渲染应用程序（服务器babel转换文件）吐出上面的错误，可能会发生因为你使用airbnb babel-plugin-dynamic-import-node而没有将noInterop设置为false .babelrc如下： { "plugins": [ ["dynamic-import-node", { "noInterop": true }] ] }

---

Answer 4

确保使用default exports因为导入时不使用命名导出： loader: () => import(/* webpackChunkName: "home" */ './Home')