React lazy does not cause splitting bundle in chunks

user_9223556 0
Viewed 2907

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?

reactjs lazy-loading
1 Answers

I also have the same problem, then I have resolved this case without using Suspense and lazy(try code below), and I can see chunks file. However, after using this way, I try changing my code again with Suspense and lazy. It works!!! and I don't know why it does. Hope that it works for someone find solution for this case.

1 - create file asyncComponent

import React, { Component } from "react";

const asyncComponent = (importComponent) => {
   return class extends Component {
      state = {
         component: null,
      };

      componentDidMount() {
         importComponent().then((cmp) => {
            this.setState({ component: cmp.default });
         });
      }

      render() {
         const C = this.state.component;

         return C ? <C {...this.props} /> : null;
      }
   };
};

export default asyncComponent;

2 - and in App.js, example:

const AuthLazy = asyncComponent(() => import("./containers/Auth/Auth"));
//Route
<Route path="/auth" component={AuthLazy} />
user_150437180
Related