DEV Community

Cover image for How to use ES6 import syntax in Node.js

How to use ES6 import syntax in Node.js

Aman Mittal on April 08, 2021

A module is a JavaScript file that exports one or more values. The exported value can be a variable, an object, or a function. An ES6 import synta...
Read full post
Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • • Edited

How to make NPM module works both with ES6 and CommonJS:

Create ./index.mjs for ES6 and ./index.js for CommonJS.

// `./index.mjs`
import foo from 'bar';

export function foo() {}
export function bar() {}
Enter fullscreen mode Exit fullscreen mode 
// `./index.js`
const foo = require('bar');

exports.foo = function () {};
exports.bar = function () {};
Enter fullscreen mode Exit fullscreen mode

In ./package.json file…

{
  "exports": {
    "import": "./index.mjs",
    "require": "./index.js"
  },
  "files": [
    "index.js",
    "index.mjs"
  ],
  "main": "index.mjs"
}
Enter fullscreen mode Exit fullscreen mode

Example: github.com/taufik-nurrohman/quote

Collapse
 
rsa profile image
Ranieri Althoff •

It seems a terrible idea to duplicate the entirety of the code only because of the two or three first lines.

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman •

Any better solution? Adding build tool to copy and convert the ES6 script into CommonJS script in the same project is too much. I do this manually since this is not a large project. I can live with that.

Thread Thread
 
rsa profile image
Ranieri Althoff •

Yes, that's the point of transpilers, just add a build step that converts the code for you instead of doing it manually.

If that's a small project, and it will not be bundled into a web app (i.e. it's a Node package), then just use the CommonJS version. That's what I do in node-argon2.

Collapse
 
adhywiranto44 profile image
Adhy Wiranto •

Thanks, now I can use import without making project using React hahaha

Collapse
 
ducaale profile image
Mohamed Dahir •

I would like to point out that there are a couple of nuances when moving from babel-translated import syntax to native ES module imports:

  • You need to specify the extension for relative files
  • You cannot use require in your ES modules
  • You cannot use named imports to import from non-ES modules

I'd say it is a bit messy at the moment but it is the future and we have to embrace it. For more information, See

Collapse
 
amanhimself profile image
Aman Mittal •

Thanks for sharing this. I'll take a look. :)

Collapse
 
miketalbot profile image
Mike Talbot ⭐ •

Pretty sure you can import from files that end with an .mjs extension in node 14+

Collapse
 
amanhimself profile image
Aman Mittal •

Yeah, .mjs is another alternative but if one is using 14+, then I personally think adding "type": "module" in package.json is more viable.

Collapse
 
swastikgowdal profile image
Swastik Gowda •

oh my man thank you this helped me a lot 👌

Collapse
 
swastikgowdal profile image
Swastik Gowda •

Isn't it better to use webpack or parcel like module bundlers ? and I guess they come with babel ?

Collapse
 
amanhimself profile image
Aman Mittal •

It depends in the size of the application. I haven’t used webpack + nodejs so cant say much on what plugins are included. Seems an interesting thing to delve into.

Collapse
 
jordanfinners profile image
Jordan Finneran •

If you want to check if a third party package supports ES Modules, I made this little tool to help

esmodules.dev/

Collapse
 
mohdahmad1 profile image
Mohd Ahmad •

I think typescript is a better way.
Check here