How to use ES6 import syntax in Node.js

📆 · ⏳ 2 min read · ·

Introduction

A module is a JavaScript files that can export one or more values. These values can be variables, objects, or even functions.

JavaScript does not have built-in support for modules, but the community has created impressive work-arounds. The two most important standards are:

  • CommonJs Modules - What we know as the require() method for importing modules and module.exports for exporting. This is designed for synchronous loading and mainly used for server.

  • Asynchronous Module Definition (AMD) - The most popular implementation of this standard is RequireJS ↗️. This is designed for asynchronous loading and mainly used for browsers.

ES6 Import

The goal for ECMAScript 6 modules was to create a format that both users of CommonJS and of AMD are happy with. The syntax for importing modules looks like this..

import Express from 'express'; // for default imports
import { foo } from 'bar'; // for named imports

and exporting with named and default exports like this..

export const MAX_USERS = 20; // Named exports
function sayHi(name) {
console.log(`Hi ${name}!`);
}
export default sayHi; // Default export

How to use it

If you try to run this code directly then you would get an error something like

Terminal window
SyntaxError: Cannot use import statement outside a module

Now, if you are using Node.js version 14.x.x or above then the simplest fix is to add “type”: “module” in your package.json file.

{
"type": "module"
}

However if you are on any version below 14, you would have to use Babel to compile your code before running it.

Note: Babel is not framework or platform opinionated. This means that it can be used in any project that is written in JavaScript and thus, in a Node.js project as well.

Let’s start by installing some dev dependencies,

Terminal window
yarn add -D @babel/core @babel/preset-env @babel/node
## OR
npm install -D @babel/core @babel/preset-env @babel/node

Next is to create a babel.config.json file and add the following config,

{
"presets": ["@babel/preset-env"]
}

Now you just have to use babel-node instead of node, so your start/dev script may look like this now

{
"scripts": {
"dev": "nodemon --exec babel-node server.js"
}
}

Hope this was helpful. See you in another one 👋

You may also like

  • Running SSL on Localhost

    In today's digital landscape, security is paramount. Secure Sockets Layer (SSL) is a crucial technology that encrypts data transmitted between a user's browser and a website, ensuring confidentiality and integrity. But did you know you can also enable SSL for your localhost development environment? This guide will walk you through the process step by step.

  • Write Secure JavaScript Applications

    Dive into the realm of writing secure JavaScript applications. Uncover practical strategies to shield your web apps from XSS and CSRF vulnerabilities, ensuring robust and safe software in an interconnected world.

  • Multi-Threaded JavaScript with Web Workers

    Are you tired of slow and unresponsive web applications? Do you want to improve the performance of your JavaScript code without sacrificing user experience? Look no further than JavaScript's Web Workers API. In this article, we'll explore the basics of web workers and how they can help you create multi-threaded web applications.