首页 文章

react-loadable - 对象作为React子节点无效

提问于
浏览 次
1

我正在尝试使用反应加载来实现延迟加载组件 . 我跟着他们的导游，但我无法让它工作 .

我有3个可加载的组件

const LazyOne = Loadable({
  loader: () => import(/* webpackChunkName: 'lazy-1' */"./components/LazyOne"),
  loading: <h1>wait</h1>
});

const LazyTwo = Loadable({
  loader: () => import(/* webpackChunkName: 'lazy-2' */"./components/LazyTwo"),
  loading: <h1>wait</h1>
});

const LazyThree = Loadable({
  loader: () => import(/* webpackChunkName: 'lazy-3' */"./components/LazyThree"),
  loading: <h1>espera</h1>
});

首先，webpack构建会因为在导入时抛出 unexpected input 错误而中断 . 所以我把它添加到我的 .babelrc

"plugins": [
    // all my other plugins...
    "syntax-dynamic-import"
  ]

现在构建是成功的，如果我使用 webpack-bundle-analyzer ，我看到所有惰性构建都正确构建！

但当我访问我的页面时，如下所示：

render() {
  return (
    <ErrorBoundary>
      <LazyOne {...this.props} />
    </ErrorBoundary>
  );
}

抛出：

对象作为React子对象无效（找到：[object Promise]） . 如果您要渲染子集合，请使用数组 .

我看到在reactpack中的react-loadables github甚至代码分割部分都没有提到这个 . 我究竟做错了什么？

EDIT

我已经改变了一些东西，并注意到它无法加载懒惰的块 .

我的网址是这样的： localhost:3000/some/rest/1/edit

并且应用程序正在尝试获取：localhost：3000 / some / rest / 1 / lazy-1.bundle.js

我应该在哪里指定路径？

javascript reactjs webpack code-splitting

1 回答

  • 0

    当我解决了主应用程序加载的捆绑包的所有问题 . 错误改变了！

    所以我把它缩小了：

    对象作为React子对象无效（找到：[object Promise]） . 如果您要渲染子集合，请使用数组 .

    Means the main bundle is not loading the lazy bundles properly (and most probably failing at loading them). For example in my case the generated lazy bundles: lazy-1, lazy-2 and lazy-3 were being put on the wrong folder by webpack. I just had to fix that

    在此修复之后，还有另一个更改，因为错误将使用我提供的代码更改为此：

    React.createElement：type无效 - 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：object .

    但为什么你会问？这很简单！ loading param不接受JSX，但它采用如下的组件类型：

    // WRONG! AND WILL THROW ERROR
const LazyOne = Loadable({
  loader: () => import(/* webpackChunkName: 'lazy-1' */"./components/LazyOne"),
  loading: <h1>wait</h1>
});

// RIGHT!
const LoadingComponent = () => (<h1>wait</h1>);

const LazyOne = Loadable({
  loader: () => import(/* webpackChunkName: 'lazy-1' */"./components/LazyOne"),
  loading: LoadingComponent
});

    就像那样我的问题得到了解决（因为我的组件没有丢失任何错误）

    回复于

相关问题