Uncaught TypeError: require.ensure is not a function at Object.getComponent (ECMASCRIPT)

Question

Am porting over my meteor project to use ecmascript instead of using webpack / babel. Also upgrading my meteor (from 1.4 to 1.7) and react (from 15.3.2 to 16.8.6) too.

routes.jsx

import * as React from 'react';

export default function (injectDeps, {Store, Routes}) {
  const route = {
    path: 'tickets',
    onEnter: (nextState, replace) => {
      if (!Meteor.userId() || !Roles.userIsInRole(Meteor.userId(), 'staff', Roles.GLOBAL_GROUP)) {
        replace('/login');
      }
    },
    getComponent(nextState, cb) {
      require.ensure([], (require) => {
        Store.injectReducer('tickets', require('./reducers'));
        cb(null, require('./containers/list.js'));
      }, 'tickets');
    },
    childRoutes: [
      {
        path: ':_id',
        getComponent(nextState, cb) {
          require.ensure([], (require) => {
            Store.injectReducer('tickets', require('./reducers'));
            cb(null, require('./containers/view.js'));
          }, 'tickets.view');
        }
      }
    ]
  };

  Routes.injectChildRoute(route);
}

Got this error:

Uncaught TypeError: require.ensure is not a function
    at Object.getComponent (routes.jsx:20)
    at getComponentsForRoute (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:38035)
    at modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:38053
    at modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37842
    at Array.forEach (<anonymous>)
    at mapAsync (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37841)
    at getComponents (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:38052)
    at finishEnterHooks (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37263)
    at next (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37810)
    at loopAsync (modules.js?hash=d04d5856a2fe2fa5c3dc6837e85d41adc321ecb2:37814

Any suggestion how to port this?

Answer 1

This is how it was done to get rid of require.ensure:

routes.jsx (final)

{
    path: 'config',
    getComponent(nextState, cb) {
        import('./containers/config').then(mod => {
            Store.injectReducer('config', require('./reducers/config').default);
            cb(null, mod.default);
        });
    }
}

NOTE: 1) This is how the to migrate from require.ensure (used by webpack) to without relying on webpack (which was my case as am fully using Meteor Atmosphere to run) 2) mod and require(...).xxx had changed to mod.default and require(...).default if reducer function is exported as export default, otherwise said reducer will not be called.