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 中的代码拆分部分都没有看到任何提及这一点的地方。我做错了什么？

编辑

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

我的url是这样的：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
});

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

Answer 2

我花了好几个小时才弄明白，但事实证明，只需添加 'async' 就可以在 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 子组件内添加异步！

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

react-loadable - Objects are not valid as a React child

javascript

reactjs

webpack

code-splitting