reactjs - 代码拆分/反应加载问题

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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

---