How to trick Node.js to load .js files as ES6 modules?

Question

Node.JS 10 added experimental support for loading ES6 modules, which already work in browsers. That would mean that we could finally use exactly the same files for Node.JS and browsers without any transpiling or polyfills.

Except we can't. Node.js requires .mjs extension for files to be loaded as modules. I tried tricking node by using a symlink, but node got around it:

D:\web\lines>node --experimental-modules ES6test.mjs
(node:7464) ExperimentalWarning: The ESM module loader is experimental.
D:\web\lines\ES6test.js:6
import myLibrary from "./MyFile.mjs";
       ^^^^^^^^^^^^^^^

I can't think of any other workaround to make this work - which really renders the whole ES6 module support useless.

Can anybody else think of some trick to make Node.js ignore the extension?

Does this answer your question? ["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) — Chris Perry, Apr 09 '21 at 19:23

score 7 · Accepted Answer · answered Jun 10 '19 at 11:20

7

You can now import .js file in node v12.x, in 2 steps:

Add the following line in your package.json file:

// package.json
{
  "type": "module"
}

Add --experimental-modules flag before the script:

node --experimental-modules index.js

Reference: https://nodejs.org/api/esm.html

answered Jun 10 '19 at 11:20

Toan

321
3
6

1

I followed you, but still got the same error. node version is 12.19.0 – dev-assassin Aug 26 '21 at 10:16
I have done fixings using: node --experimental-specifier-resolution=node index.js – isarojdahal May 11 '22 at 09:03

Estus Flask · Answer 2 · 2018-06-14T09:47:11.890

Node.js requires all ES modules should have .mjs extension. Since Node.js support of ES modules is experimental, this is subject to change. A proposal and open pull request are expected to address this problem with package.json esm flag and --mode option.

Currently this can be solved with custom ES module loader that hooks into default module resolver and changes module type for some modules:

custom-loader.mjs

import path from 'path';

const ESM_WITH_JS_EXT = './MyFile.js'; // relative to loader path
const ESM_WITH_JS_EXT_URL = new URL(path.dirname(import.meta.url) + `/${ESM_WITH_JS_EXT}`).href;

export function resolve(specifier, parentModuleURL, defaultResolver) {
    const resolvedModule = defaultResolver(specifier, parentModuleURL);

    if (resolvedModule.url === ESM_WITH_JS_EXT_URL)
        resolvedModule.format = 'esm';

    return resolvedModule;
}

It is used as:

node --experimental-modules --loader ./custom-loader.mjs ./index.mjs

Since there are fundamental differences in how ES and CommonJS modules are evaluated, the changes should be limited to modules that need them.

Looks promising, I will try that. – Tomáš Zato Jun 14 '18 at 09:31 — Tomáš Zato, Jun 14 '18 at 09:31

score 2 · Answer 3 · answered Dec 14 '18 at 14:33

I solved exactly this problem with the fabulous esm package. You can enable dynamic (smart) esm module loading package wide, or per run with a flag like this:

node -r esm your/es6/module.js

It also has options to treat every file as a es6 module, or only those ending in '.mjs'. There are other packages out there, but this one just worked.

score 0 · Answer 4 · answered Nov 21 '19 at 16:49

Import and export modules using ES6 that work with Node.js

Name files with .mjs extension instead of .js

Create files

touch main.mjs lib.mjs

main.js

import { add } from './lib.mjs';
console.log(add(40, 2));

lib.mjs

export let add = (x,y) => {
  return x + y
}

Run

node --experimental-modules main.js

score 0 · Answer 5 · answered Oct 29 '20 at 08:29

Here is a module that does what you need esmjs.mjs

import { readFileSync } from 'fs'
import { fileURLToPath, pathToFileURL } from 'url'
import { dirname, join } from 'path'

export const jsmodule = (test_url_or_path, module_path) => {

    const __filename = test_url_or_path.toLowerCase().startsWith('file:')
        ? fileURLToPath(test_url_or_path)
        : test_url_or_path

    const __dirname = dirname(__filename)

    const abs_path = join(__dirname, module_path)
    const file_url = pathToFileURL(abs_path)

    const file_buf = readFileSync(file_url)
    const b64 = file_buf.toString('base64')

    const moduleData = "data:text/javascript;base64," + b64

    return import(moduleData)
}

Usage from .mjs module:

const { hey } = await jsmodule(import.meta.url, '../../test-data/mjs.js')

Usage, from .js file:

const { hey } = await jsmodule(__filename, '../../test-data/mjs.js')

Reference & tests on Github

score -1 · Answer 6 · answered Jun 13 '18 at 21:59

-1

You can do it in this way:

Create a file module2.mjs (the name is up to you)

'use strict';

export function foo() {
    return 'foo';
}

Create index.mjs file:

'use strict';

import { foo } from './module2.mjs';

console.log(foo());

Using node 8.11.1 (or 10) you can run it as (command and output provided):

node --experimental-modules index.mjs
(node:60428) ExperimentalWarning: The ESM module loader is experimental.
foo

answered Jun 13 '18 at 21:59

Jose Mato

2,709
1
17
18

I assume that that the goal is to import existing .js ES modules (a package or common code) without changing their extensions to .mjs. – Estus Flask Jun 13 '18 at 22:34
then i guess is not possible, at least with node native function, if babel is an option then I guess could be possible – Jose Mato Jun 13 '18 at 22:51
I found it to be possible but hacky, see my answer. – Estus Flask Jun 13 '18 at 23:59

How to trick Node.js to load .js files as ES6 modules?

6 Answers6

Import and export modules using ES6 that work with Node.js

Create files

main.js

lib.mjs

Run

Linked