Create-react-app: couldn't make require.ensure to work

[tusharkhatiwada]

Hi there,
I'm trying to use dynamic routing with require.ensure but am unable to make it work. Here is my code snippet:

routes.js

import React from 'react';
import { Router, Route, browserHistory } from 'react-router';

import App from './App';

const componentRoutes = {
  component: App,
  path: '/',
  childRoutes: [
    {
      path: 'Login',
      getComponent: (a, cb) => require.ensure([], require => {cb(null, require('./Login'));})
    },
    {
      path: 'Report',
      getComponent: (a, cb) => require.ensure([], require => {cb(null, require('./Report'));})
    }
  ]
};

const Routes = () => {
  return (
    <Router history={browserHistory} routes={componentRoutes} />
  );
};

export default Routes;

There is neither error on the terminal nor on the Chrome's console. The page just renders the App component.

Am I missing something?

[gaearon]

Can you create a standalone example reproducing this without RR?

[tusharkhatiwada]

Can you create a standalone example reproducing this without RR?

Sorry @gaearon I didn't get your question clearly?
I'm trying to use the Dynamic Routing feature in CRA as System.import isn't yet supported on CRA.

[gaearon]

I understand, but can you create an example that doesn't use React Router but still reproduces the issue? I don't know React Router API well so it's hard for me to tell from an example like this if it's a problem with CRA or if you're just misusing RR API in some way.

[gaearon]

For example require('./Login') looks suspicious because if you use ES6 exports there, you likely want require('./Login').default instead.

[tusharkhatiwada]

require('./Login').default did the job.

Thank you @gaearon

[gaearon]

It's weird RR didn't throw an error on this. (Which is why I wanted to isolate it—wasn't sure if RR handles such errors.)