How to import and export in CommonJS and ES Modules

CommonJS: modules are the original way to package JavaScript code for Node.js.
ES Modules: ES modules bring an official, standardized module system to JavaScript.

There are good articles out there to understand what they are and their differences. Here are the links that I read.
Before diving into code right away, I recommend you read these articles.

CommonJS

Basic Usage

[aboutme.js]

const person = {
  name: "Lico",
  role: "Frontend Engineer",
};

function printName() {
  console.log(person.name);
}

function printRole() {
  console.log(person.role);
}

module.exports = {
  person,
  printName,
  printRole,
};

[main.js]

const aboutme = require("./aboutme");

aboutme.printName();
aboutme.person.name = "lico!";
aboutme.printName();

You can change the variables that imported from other modules, but do not encourage to do.

Named Import

const { printName, printRole } = require("./aboutme");

printName();
printRole();

You can import it with Destructuring assignment.

Of course, if you do not export functions, you can't import the functions.

+ You can export anything instead of object

[aboutme.js]

const person = {
  name: "Lico",
  role: "Frontend Engineer",
};

function printName() {
  console.log(person.name);
}

function printRole() {
  console.log(person.role);
}

module.exports = {
  // person,
  // printName,
  printRole,
};

[main.js]

const aboutme = require("./aboutme");

console.log(aboutme);

ES Modules

To use ES Modules, I added this line into package.json.

{
  ...
  "type": "module"
  ...
}

Basic Usage

const person = {
  name: "Lico",
  role: "Frontend Engineer",
};

function printName() {
  console.log(person.name);
}

function printRole() {
  console.log(person.role);
}

export default {
  person,
  printName,
  printRole,
};

import aboutme from "./aboutme.js";

aboutme.printName();
aboutme.person.name = "lico!";
aboutme.printName();

It's very similar to CommonJS. You are also able to change the exported variables.

Named Import

import { printRole } from "./aboutme.js";

printRole();

It is going to occur an error like below.

SyntaxError: The requested module './aboutme.js' does not provide an export named 'printRole'

To use named import, you must export the functions.

export function printRole() {
  console.log(person.role);
}

The error would be gone. you can export multiple functions and variables with only one export keyword instead of put export in front of every functions and variables that you want to export.

const person = {
  name: "Lico",
  role: "Frontend Engineer",
};

function printName() {
  console.log(person.name);
}

function printRole() {
  console.log(person.role);
}

export { person, printName, printRole };

export default {
  person,
  printName,
  printRole,
};

And you are able to import with name.

import { printRole, printName } from "./aboutme.js";

printRole();
printName();

You also can use default and Named Import both together and you can use as keyword to rename them.

import aboutme, { printRole as role } from "./aboutme.js";

console.log(aboutme);
aboutme.printName();
role();

Import with the Asterisk

[aboutme.js]

const person = {
  name: "Lico",
  role: "Frontend Engineer",
};

function printName() {
  console.log(person.name);
}

function printRole() {
  console.log(person.role);
}

export { person, printName, printRole };

export default {
  person,
  printName,
};

[main.js]

import * as aboutme from "./aboutme.js";

console.log(aboutme);

You see default. That is the object which is exported using export default.

Import a module which uses `CommonJS` as a module system from `ES Modules`

[lib/aboutme.js]

const person = {
  name: "Lico",
  role: "Frontend Engineer",
};

function printName() {
  console.log(person.name);
}

function printRole() {
  console.log(person.role);
}

module.exports = {
  person,
  printName,
  printRole,
};

[main.js]

import aboutme, { person, printName, printRole } from "./lib/aboutme.js";

console.log(person);
console.log(printName);
console.log(printRole);
console.log(aboutme);

You can use default and Named Import.

[main.js]

import * as aboutme from "./lib/aboutme.js";

console.log(aboutme);

As you see, there are default and exported functions and a variable.

You cannot import a module which uses ES Modules as a module system from CommonJS. If you try it, you will see like this error. (With a bundler, it will be working)

I hope you found it useful.
Enjoy your coding!

How to import and export in CommonJS and ES Modules

CommonJS

Basic Usage

Named Import

ES Modules

Basic Usage

Named Import

Import with the Asterisk

Import a module which uses CommonJS as a module system from ES Modules

Import a module which uses `CommonJS` as a module system from `ES Modules`