react-loadable - 对象作为 React 子对象无效答案

【问题标题】：react-loadable - Objects are not valid as a React childreact-loadable - 对象作为 React 子对象无效
【发布时间】：2018-05-27 11:33:05
【问题描述】：

我正在尝试使用 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 构建会中断，因为它在导入时抛出了 unexpected input 错误。所以我将此添加到我的 .babelrc

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

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

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

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

这会抛出：

对象作为 React 子级无效（找到：[object Promise]）。如果你的意思是渲染一组孩子，使用一个数组来代替。

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

编辑

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

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

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

我应该在哪里指定路径？

【问题讨论】：

您在哪个组件中收到此错误？
@Madhavan.V 当我尝试渲染任何惰性组件时。在我的示例中，我尝试渲染 LazyOne。
你能检查控制台是否有错误吗，我在尝试在渲染方法中显示一些值时遇到了这种问题。
@Madhavan.V 这与我在问题中发布的错误完全相同：Objects are not valid as a React child (found: [object Promise])。如果您打算渲染一组子项，请改用数组。
我也遇到了一些问题。我会尝试从react-loadable 中删除它以确保组件正常工作。我有一个错误，它正在从内部组件中吞下错误。

标签： javascript reactjs webpack code-splitting

【解决方案1】：

我花了几个小时才弄明白，但事实证明，仅仅添加“异步”就可以在 React 中搞砸了。而且你没有得到任何好的反馈。

const renderB2bApp = (store, callback) => {
  ReactDOM.render(
    <Provider store={store}>
      <B2BApp store={store} />
    </Provider>,
    appElement,
    callback,
  );
};

const B2BApp = async (props) => { {/* <--- async here!! remove it */ }
    // ...    
    // it doesn't matter if you don't use `await` even just adding the async destroys it
}

如果你需要做异步的事情，那么你需要立即渲染一些东西，然后使用钩子或状态来更新组件。所以不要在ReactDom.render 子组件中添加异步！

【讨论】：

【解决方案2】：

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

所以我缩小了范围：

对象作为 React 子级无效（找到：[object Promise]）。如果你的意思是渲染一组孩子，使用一个数组来代替。

意味着主包没有正确加载惰性包（并且很可能无法加载它们）。例如，在我的例子中，生成的惰性包：lazy-1、lazy-2 和lazy-3 被 webpack 放在了错误的文件夹中。我只需要解决这个问题

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

React.createElement: type is invalid -- 需要一个字符串（对于内置组件）或类/函数（用于复合组件）但得到了：对象。

但是为什么你会问呢？这很简单！ 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
});

就这样我的问题得到了解决（因为我的组件没有抛出任何错误）

【讨论】：