score:0

I had the same problem on one of my project : we used Systemjs and decided to switch to Webpack, so it broke our System.import. We fix it by replacing :

System.import(modulePath)
  .then(module => {
    // Do things
  })

With :

new Promise((resolve, reject) => {
    resolve(require(modulePath));
}).then((module) => { 
  // Do things 
});

Hope this helps

score:0

i am using webpack 1.13.1 and here is my config

output: {
        path: PATHS.build,
        filename: '[name].[hash].js',
        publicPath:"/"
    },

here is the code for get component

const lazyLoadSomeComponent = () => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          callback(null, require("./componentpath")["default"]);
        }, 'componentName');
      }
    }
};

Then in route

<Route path="somepath" {...lazyLoadSomeComponent()} />

But Whats going here ?

  • First we create a function that will return the get component Method for us.
  • Second we call that function in route and execute it so we get the get component Method there , this will make routes easy to read
  • Last in webpack specify the public path so "/" here resolves from root of your server, you can also specify your domain here

For Further Enhancement we can load multiple component at once using below method

const LazyComponents = (pageName) => {
  return {
      getComponent: (location, callback)=> {
        require.ensure([], require => {
          switch(pageName){
            case 'Component1':
            callback(null, require("./components/component1")["default"]);
            break;
            case 'Component2' :
                callback(null, require( "./components/component2" )["default"]);
                    break ;

        }, "CombinedComponents");
      }
    }
};

Then in Routes

<Route path="somepath" {...LazyComponents('Component1')} />

score:1

Ensure takes an argument array of modules you want to require. You need to supply the array with the module names you wish to dynamically load. In your case, provide 'containers/Authenticate/AuthenticateContainer.js' to ensure like this:

require.ensure(['containers/Authenticate/AuthenticateContainer.js'], (require) => {
      callback(null, require('containers/Authenticate/AuthenticateContainer.js').default)
    }, 'auth');

Related Query

More Query from same tag