Why does require.ensure not work with ES6 export default?

Question

JavaScript

I was soaring with routing and did not understand why components are not loaded via require.ensure React components. Rather, the files were loaded, but the components were not mounted. Randomly stumbled upon the problem that when export default ComponenName the component is not mounted. If we put module.exports = ComponentName, then everything works. Why is that? Are there ways to make it work with ES6?

Answer 1

The thing is, ES6 doesn't support dynamic module imports. There is a System for this, which returns a promise, but it is not supported by webpack. Read more here www.2ality.com/2014/09/es6-modules-final.html

Answer 2

// chunk1.js
export default class Component extends React.Component {
    //...
}

// chunk2.js
require.ensure( [], function ( require ) {
    callback( null, require( './module' ).default ) 
    //       то что Вам нужно находится в ^^^^^^^ свойстве default 
})