Require.ensure doesn't seem to work, is it available in CRA?

This is based on acdlite quick & dirty code splitting with react-router 4:

You can reproduce with:

// ACDLiteComponent.js
import React from 'react';

function asyncComponent(pathToComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      const setState = this.setState.bind(this);
      if (!this.state.Component) {
        require.ensure([], () => {
          var Component = require(pathToComponent).default;
          AsyncComponent.Component = Component;
          setState(() => ({ Component: Component }));
        })
      }
    }
    render() {
      const { Component } = this.state;
      if (!Component) {
        return null;
      }
      return <Component {...this.props} />;
    }
  }
}


export default asyncComponent;

This is being used in index.js of CRA:

import React from 'react';
import Router from 'react-router/BrowserRouter';
import Match from 'react-router/Match';
import ReactDOM from 'react-dom';
import asyncComponent from './ACDLiteAsyncComponent';

const Home = () => asyncComponent('./C/HomePage.js');

const Gallery = () => asyncComponent('./C/GalleryPage.js');


ReactDOM.render(
  <Router>
    <div>
      <Match exactly pattern="/" component={Home}/>
      <Match pattern="/gallery" component={Gallery}/>
    </div>
  </Router>,
  document.getElementById('root')
);

[gaearon]

Custom loaders like bundle-loader are not supported in CRA. Please use require.ensure() syntax directly.

[dmitrySheshko]

Try this:

1. npm install bundle-loader --save-dev
2. const Home = () => asyncComponent(‘bundle-loader!./C/HomePage.js’);
3. function asyncComponent(cb) {…}
4. componentWillMount() { cb((component) => { var Component = component.default; AsyncComponent.Component = Component; setState(() => ({ Component: Component })); }); }