Wsrtjtyk

As in the title, I'm trying to use React.lazy feature which works in my my other project. But not in this one, I don't know what I'm missing here. All works just fine, no errors, no warnings. But for some reason I don't see my bundle split in chunks.

Here's my implementation:

import React, { Component, Suspense } from 'react';

import { connect } from 'react-redux';

import { Link } from 'react-router-dom';

import { getApps } from '../../actions/apps';

import './_apps.scss';



const AppItemComponent = React.lazy(() => import('../AppItem'));



class Apps extends Component {

  componentDidMount() {

    const { getApps } = this.props;



    getApps(3);

  }



  renderAppItem = () => {

    const { apps } = this.props;



    return apps && apps.map((item, i) =>  {

      return (

        <Suspense fallback={<div>loading...</div>} key={i}>

          <AppItemComponent

            index={i + 1}

            item={item}

          />

        </Suspense>

      );

    });

  };



  render() {

    const { apps } = this.props;



    return (

      <div className="apps__section">

        <div className="apps__container">

          <div className="apps__header-bar">

            <h3 className="apps__header-bar--title">Apps</h3>

            <Link className="apps__header-bar--see-all link" to="/apps">{`see all (${apps.length})`}</Link>

          </div>

          {this.renderAppItem()}

        </div>

      </div>

    );

  }

}



const mapStateToProps = ({ apps }) => {

  return { apps };

};



const mapDispatchToProps = dispatch => {

  return {

    getApps: quantity => dispatch(getApps(quantity)),

  };

};



export default connect(mapStateToProps, mapDispatchToProps)(Apps);

I'm doing this in react-create-app app and in react v16.6, react-dom v16.6.

What am I missing here?