Solve - To load an ES module, set "type" - "module" in JS

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Jens Johnsson

Solve - To load an ES module, set "type" - "module" #

The "To load an ES module, set "type": "module" in package.json" error occurs when using the ES6 Module syntax in a Node.js application without setting the type property to module in the package.json file. To solve the error, set the type property to module in the package.json file.

to load es module set type module in package json

Here's an example of how the error occurs.

index.js
// โ›”๏ธ To load an ES module, set "type": "module" in // package.json import moment from 'moment'; moment().format();

To be able to load an ES module, set the type property to module in your project's package.json file.

package.json
{ "type": "module", // ๐Ÿ‘‡๏ธ rest ... }

If your project does not have a package.json file, open your terminal in your project's root directory and run the following command.

shell
# โ—๏ธ only do this if you don't have a package.json file npm init -y

Now you are able to use the ES6 module import and export syntax in our Node.js code.

index.js
import moment from 'moment'; console.log(moment().format()); // ๐Ÿ‘‰๏ธ 2021-12-08T11:08:...
If you don't want to change the contents of your package.json file, you can change the file's extension to .mjs instead of .js.

For example, a file called index.js should become index.mjs. This indicates to Node that the file is a module.

index.mjs
import moment from 'moment'; console.log(moment().format()); // ๐Ÿ‘‰๏ธ 2021-12-08T11:08:...

The code above works even without setting the type property to module in your project's package.json file.

Note that when working with modules, you can't use the require syntax in your code, you can only use the ES6 modules import/export syntax.

Here are examples of how to use ES6 module imports in a Node.js application.

You can use default imports/exports with ES6 modules in the following way:

index.js
// ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And import the function in the other file.

another-file.js
// ๐Ÿ‘‡๏ธ default import import sum from './index.js'; console.log(sum(5, 5)); // ๐Ÿ‘‰๏ธ 10

Notice that we do not use curly braces when working with default imports.

You can only have 1 default export per file.

Here's how you use named imports/exports.

index.js
// ๐Ÿ‘‡๏ธ named export export function sum(a, b) { return a + b; }

And now we use a named import in the other file.

another-file.js
// ๐Ÿ‘‡๏ธ named import import {sum} from './index.js'; console.log(sum(5, 5)); // ๐Ÿ‘‰๏ธ 10

Notice the curly braces, this is how we import a named export.

You have to be consistent with your imports and exports. Don't use curly braces when importing default exports and use curly braces when importing named exports.

You can also mix and match, here's an example.

index.js
// ๐Ÿ‘‡๏ธ named export export const num = 20; // ๐Ÿ‘‡๏ธ default export export default function sum(a, b) { return a + b; }

And here are the imports.

another-file.js
// ๐Ÿ‘‡๏ธ default and named imports import sum, {num} from './index.js'; console.log(sum(5, 5)); // ๐Ÿ‘‰๏ธ 10 console.log(num); // ๐Ÿ‘‰๏ธ 20

We used a default import to import the sum function and a named import to import the num variable.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee