Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to correctly use ES6 "export default" with CommonJS "require"?

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?

like image 601
mr.b Avatar asked Mar 13 '16 13:03

mr.b


People also ask

What is the difference between ES6 and CommonJS?

While CommonJS and ES6 modules share similar syntax, they work in fundamentally different ways: ES6 modules are pre-parsed in order to resolve further imports before code is executed. CommonJS modules load dependencies on demand while executing the code.

What is export default in ES6?

Export Default is used to export only one value from a file which can be a class, function, or object. The default export can be imported with any name.

Should you use import or require?

One of the major differences between require() and import() is that require() can be called from anywhere inside the program whereas import() cannot be called conditionally, it always runs at the beginning of the file. To use the require() statement, a module must be saved with . js extension as opposed to .


1 Answers

To use export default with Babel, you can do 1 of the following:

  1. require("myStuff").default
  2. npm install babel-plugin-add-module-exports --save-dev

Or 3:

//myStuff.js var thingToExport = {}; Object.defineProperty(exports, "__esModule", {   value: true }); exports["default"] = thingToExport; 
like image 162
Cooper Buckingham Avatar answered Sep 23 '22 10:09

Cooper Buckingham