I've been working through Webpack tutorial. In one of the sections, it gives the code example that contains one line of essence to this question:

export default class Button { /* class code here */ }

In the next section of said tutorial, titled Code splitting, the class defined above is loaded on demand, like this:

require.ensure([], () => {

    const Button = require(./Components/Button);

    const button = new Button(google.com);

    // ...

});

Unfortunately, this code throws an exception:

Uncaught TypeError: Button is not a function

Now, I know that the right way to include ES6 module would be to simply import Button from './Components/Button'; at the top of the file, but using a construct like that anywhere else in the file makes babel a sad panda:

SyntaxError: index.js: 'import' and 'export' may only appear at the top level

After some fiddling with previous (require.ensure()) example above, I realized that ES6 export default syntax exports an object that has property named default, which contains my code (the Button function).

I did fix the broken code example by appending .default after require call, like this:

const Button = require(./Components/Button).default;

...but I think it looks a bit clumsy and it is error-prone (I'd have to know which module uses ES6 syntax, and which uses good old module.exports).

Which brings me to my question: what is the right way to import ES6 code from code that uses CommonJS syntax?