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

不要将jsx传递给Loadable组件的加载密钥，提供有效的react组件。

.dropbtn{background-color:#4CAF50;color:#fff;padding:16px;font-size:16px;border:none;cursor:pointer}.dropbtn:focus,.dropbtn:hover{background-color:#3e8e41}#myInput{border-box:box-sizing;background-image:url(searchicon.png);background-position:14px 12px;background-repeat:no-repeat;font-size:16px;padding:14px 20px 12px 45px;border:none;border-bottom:1px solid #ddd}#myInput:focus{outline:#ddd solid 3px}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#f6f6f6;min-width:230px;overflow:auto;border:1px solid #ddd;z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown a:hover{background-color:#ddd}.show{display:block}

Answer 3

对于那些因为他们是服务器端渲染应用程序（服务器babel转码文件）而吐出上述错误的人来说，可能是因为您使用的是airbnb babel-plugin-dynamic-import-node而未设置{{ 1}}在noInterop上为false，如下所示： .babelrc

Answer 4

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

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

4 个答案: