CODEWITHSUNDEEP
reactjslazy-loading
Murakami
Murakami

Reputation: 3760

React lazy does not cause splitting bundle in chunks

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?

Upvotes: 4

Views: 5241

Answers (2)

ArtSur
ArtSur

Reputation: 99

  1. Check that your component is not imported somewhere with regular import: import SomeComponent from './path_to_component/SomeComponent';

  2. Check that component is not re-exported somewhere. (For example in index.js (index.ts) file: export * from './SomeComponent') If so, just remove re-export of this component.

  3. Check that your export your component as default or use code like this:

    const SomeComponent = React.lazy(() => import('./path_to_component/SomeComponent').then((module) => ({ default: module.SomeComponent })));

Upvotes: 4

Peppers
Peppers

Reputation: 386

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} />

Upvotes: 1

Related Questions