DEV Community

Cover image for Best way to use ES Modules in Node.js as of today
Kaushik Evani
Kaushik Evani

Posted on

Best way to use ES Modules in Node.js as of today

The other day I started to write a basic server for some hobby project in Node.js and realised that I had gotten pretty used to using ES style module imports, and that the lack of it in Node.js was irksome. This post is a result of my subsequent research into it.

What Node.js says you can do

In the current stable version of Node.js (10.16), the ES modules are in "experimental" feature. Therefore to use it, you would have to use the
--experimental-modules flag and the file should be saved with a .mjs extension.

$ node --experimental-modules app.mjs

In the latest release of Node(12.6), you can keep the extension of the file as .js but add "type": "module" in the nearest package.json. For more info check here

Problems with this

The ES modules and the CommonJS modules are mutually exclusive. You cannot mix and match require and import in a .mjs file. The obvious problem here is when you have existing boilerplate node_module requires, all of which you have to update to something like import * as ...

For example, if I wanted to import my api handlers the ES module way and leave the other boilerplate as it is, it WILL NOT WORK.

    var express = require('express')
    var router = express.Router();
    import { GetHandler, PostHandler } from './handlers';

    router.get('/:id?', GetHandler);
    router.post('/', PostHandler);

    module.exports = router
Enter fullscreen mode Exit fullscreen mode

Even if you have a medium sized project, you would end up spending a lot of time changing requires and file names for a lot of files, which is just not right.

One solution

Use babel.
We've all been using babel for front-end projects forever. But for the server-side, we don't have to worry about developing for different target browsers etc. You'll most likely be using one of the recent versions of Node and therefore only have to transpile down to that. But even then I felt babel is a bit of an overkill for what we are trying to achieve here.

Best solution for this use case: Sucrase (github)

"Sucrase is an alternative to Babel that allows super-fast development builds."

Sucrase doesn't cater to all use cases. It assumes you are developing for recent versions of the browser or Node.js and therefore does only a subset of the work babel does, making it automatically faster. According to them it is 20x faster than babel!

Here's a dev.to article on sucrase

For more info, see their github page.

So for our use case, all we need to do, is use the sucrase require hook at the top of our app, and we are good to go!

    // server.js
    require('dotenv').config()
    if (process.env.NODE_ENV === 'development') 
        require('sucrase/register');

    const express = require('express')
    let app = express()
    const port = process.env.PORT;

    /**
     *  OTHER SERVER CODE
     */

    app.listen(port, () => console.log(`Server listening on port ${port}...`));

Enter fullscreen mode Exit fullscreen mode
WARNING! It is not advised to use require hooks in production. For production, use the sucrase cli.

Top comments (6)

Collapse
 
drazisil profile image
Molly Crendraven

I use Typescript and ts-node, works like a charm.

Collapse
 
kau profile image
Kaushik Evani

Of course, but then you would have to use typescript for the whole project right? What if you don't want strict typing. What if you are extending existing node.js code? You would have to change all the .js files to .ts right? I was basically looking for a solution as close to native node.js as possible.

Collapse
 
drazisil profile image
Molly Crendraven

Typescript allows you to use JS as well. You can also set types as any, so it doesn't require a full conversion. You are adding a dependency either way, I was expressing my preference. The great thing about Node is you can do things many different ways
😊

Thread Thread
 
kau profile image
Kaushik Evani

Yeah sure, to each his own. But are you sure TS allows JS? I mean do you mean it allows JS code in TS files or it allows JS files? Because compiling .js files with tsc throws "The only supported extensions are '.ts', '.tsx', '.d.ts'" error.

Thread Thread
 
drazisil profile image
Molly Crendraven • Edited
Thread Thread
 
kau profile image
Kaushik Evani

Oh cool cool...