React Lazy loading import failing

Question

My component looks something like this, of course with a few unimportant details omitted:

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));

When I replace the const DialogBox = React.lazy(() => import('./DialogBox')); line with a normal import DialogBox from './DialogBox', everything works fine. I followed this guide from React's site, but with no success. Where did I go wrong here?

EDIT:

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.

I am using React 16.8.6 with Create-React-App handling the Webpack side of things.

EDIT 2:

After a bit of fiddling, I found out that the fix was using the <Suspense> component from react like so:

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

what was the error message? which versions of React and Webpack are you using? — Aprillion
– Aprillion, Commented Jul 15, 2019 at 18:27
react router lazy component looks related if you are using Router... if not, what version of react-scripts (installed by create react app)? is the line number for the error message on the dynamic import or different line? — Aprillion
– Aprillion, Commented Jul 15, 2019 at 18:38
Great job @NicholasDomenichini I saw the update right after I posted the answer :) — dance2die
– dance2die, Commented Jul 15, 2019 at 18:49

dance2die · Accepted Answer · 2019-07-15 18:47:33Z

2

You need to wrap your lazily component with React.Suspense by providing the fallback component to show. (such as a message or a loading gif etc).

You can safely replace React.Fragment with React.Suspense.

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

For more info, check out Code-Splitting > Suspense documentation.

answered Jul 15, 2019 at 18:47

dance2die

37.2k39 gold badges137 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Lazy loading import failing

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related