title: React Lazy loading import failing
body: <p>My component looks something like this, of course with a few unimportant details omitted:</p>
  
  <pre><code>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(() =&gt; import('./DialogBox'));
  
  const mapStateToProps = (state, ownProps) =&gt; {
    return {
      answer: state.answers[state.stepper][ownProps.obj.ID]
    }
  }
  
  const mapDispatchToProps = { }
  
  
  class FlexiblePopupSelect extends React.Component {
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;DialogBox /&gt;
        &lt;/React.Fragment&gt;
      )
    }
  }
  
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(withStyles(styles)(FlexiblePopupSelect));
  </code></pre>
  
  <p>When I replace the <code>const DialogBox = React.lazy(() =&gt; import('./DialogBox'));</code> line with a normal <code>import DialogBox from './DialogBox'</code>, everything works fine. I followed <a href="https://reactjs.org/docs/code-splitting.html#reactlazy" rel="nofollow noreferrer">this guide</a> from React's site, but with no success. Where did I go wrong here?</p>
  
  <p>EDIT:</p>
  
  <p>There was no real error message, it just gives me a bunch of error messages that say "The above error occurred in one of your React components" but it never gives me any error message above.</p>
  
  <p>I am using React 16.8.6 with Create-React-App handling the Webpack side of things.</p>
  
  <p>EDIT 2:</p>
  
  <p>After a bit of fiddling, I found out that the fix was using the <code>&lt;Suspense&gt;</code> component from react like so:</p>
  
  <pre><code>&lt;React.Fragment&gt;
    &lt;Suspense&gt;
      &lt;DialogBox /&gt;
    &lt;/Suspense&gt;
  &lt;/React.Fragment&gt;
  </code></pre>