javascript - react-loadable - 对象作为 React 子对象无效

Question

我正在尝试使用 react-loadable 实现延迟加载组件。我已按照他们的指南进行操作，但无法正常工作。

我有 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 构建会中断，因为它在导入时引发了意外输入 错误。所以我将它添加到我的 .babelrc

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

现在构建成功了，如果我使用 webpack-bundle-analyzer，我会看到所有惰性构建都已正确构建!

但是当我访问这样呈现的页面时:

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

抛出:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

我在 react-loadables github 甚至 webpack 的代码分割部分都没有看到任何提及这一点的地方。我做错了什么？

编辑

我做了一些改动，发现它无法加载惰性 block 。

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

应用正在尝试获取:localhost:3000/some/rest/1/lazy-1.bundle.js

我应该在哪里指定路径？

Answer 1

当我解决了有关主应用程序加载包的所有问题时。错误改变了!

所以我缩小了范围:

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

意味着主包没有正确加载惰性包(很可能加载失败)。例如，在我的例子中，生成的懒惰包:lazy-1、lazy-2 和 lazy-3 被 webpack 放在了错误的文件夹中。我只需要解决这个问题

在这个修复之后还有另一个变化要做，因为错误将通过我提供的代码改变为这个:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

但你为什么会问？这很简单! loading 参数不采用 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
});

就这样我的问题就解决了(因为我的组件没有抛出任何错误)