代码拆分/反应加载问题答案

【问题标题】：Code splitting/react-loadable issue代码拆分/反应加载问题
【发布时间】：2018-05-01 12:48:52
【问题描述】：

我正在尝试使用 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

我没有看到任何明显的错误，我无法在该回购中提出问题。

【问题讨论】：

标签： reactjs code-splitting react-loadable

【解决方案1】：

事实证明，您需要将组件传递给 loading 选项而不是 JSX。文档清楚地说明了这一点，我只是错过了。

【讨论】：

我在本教程youtu.be/AR5GSZuox1k的帮助下实现了代码拆分（react-loadable）
更多细节：loading: () =>
loading

【解决方案2】：

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

【讨论】：

【解决方案3】：

不要将 jsx 传递给 Loadable 组件的加载键，提供有效的反应组件。

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

【讨论】：

【解决方案4】：

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

【讨论】：