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'时，一切都正常。我遵循了来自React网站的这个指南，但没有成功。我在哪里出错了？

编辑：

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

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

编辑2：

经过一些折腾，我发现修复方法是使用React的<Suspense>组件，如下：

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

- Nicholas Domenichini

---

错误信息是什么？您正在使用哪些版本的React和Webpack？ - Aprillion

@Aprillion，请查看我上面的编辑以获取此信息。 - Nicholas Domenichini

如果你在使用Router，react router lazy component 看起来是相关的…… 如果不是，那么你使用的 react-scripts 版本是多少（由create react app安装）？错误信息的行号是动态导入还是其他行？ - Aprillion

做得好，@NicholasDomenichini。我在回答后立刻看到了更新 :) - dance2die

Answer 1

你需要使用React.Suspense包裹你的惰性组件，并提供回退组件以展示（例如消息或加载动画等）。

你可以安全地用{{code:React.Suspense}}替换{{code:React.Fragment}}。

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

欲了解更多信息，请查看代码拆分 > 悬挂文档。

- dance2die