javascript - react 延迟加载导入失败

Question

我的组件看起来像这样，当然省略了一些不重要的细节:

import React from 'react';
import { createMuiTheme, MuiThemeProvider, withStyles } from "@material-ui/core/styles";
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';
import Tooltip from '@material-ui/core/Tooltip';
import { connect } from 'react-redux';
const DialogBox = React.lazy(() => import('./DialogBox'));

const mapStateToProps = (state, ownProps) => {
  return {
    answer: state.answers[state.stepper][ownProps.obj.ID]
  }
}

const mapDispatchToProps = { }


class FlexiblePopupSelect extends React.Component {
  render() {
    return (
      <React.Fragment>
        <DialogBox />
      </React.Fragment>
    )
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(FlexiblePopupSelect));

当我替换 const DialogBox = React.lazy(() => import('./DialogBox')); 时符合正常 import DialogBox from './DialogBox' ，一切正常。我关注了this guide来自 React 的网站，但没有成功。我哪里出错了？

编辑:

没有真正的错误消息，它只是给我一堆错误消息，说“上面的错误发生在你的一个 React 组件中”，但它从来没有给我上面的任何错误消息。

我正在使用 React 16.8.6 和 Create-React-App 来处理 Webpack 方面的事情。

编辑 2:

经过一番调整后，我发现修复是使用 <Suspense>像这样 react 的组件:

<React.Fragment>
  <Suspense>
    <DialogBox />
  </Suspense>
</React.Fragment>

Answer 1

你需要用 React.Suspense 包装你的惰性组件通过提供后备组件来显示。 (例如消息或正在加载的 gif 等)。

您可以安全地将 React.Fragment 替换为 React.Suspense。

class FlexiblePopupSelect extends React.Component {
  render() {
    return (
      <React.Suspense fallback={<div>Loading dialog box...</div>}>
        <DialogBox />
      </React.Suspense>
    )
  }
}

有关更多信息，请查看 Code-Splitting > Suspense文档。