What is the difference between .js and .mjs files?

Question

I have started working on an existing project based on Node.js. I was just trying to understand the flow of execution, where I encountered with some *.mjs files. I have searched the web where I found that these are module based JS-files.

I want to know how is it different from *.js files (how does it benefit)?

Commonwealth

For readers in 2022: mjs means (ES6 modules)-javascript, against the CommonJS one, i.e. *.cjs. – Gropius

You may have found this question because you're using an old version of node. It is marked as the original question under the claim that "What breaks nodejs.org's rule that all files are treated as modules?" I don't know if that's true in node.js v16, but that version claims that await can be used in the top-level code of a module. I was not able to get it to work, whether I used the extension .cjs or .mjs. Instead, I wrapped my code in an anonymous async function to solve it. – Watchband

Answer 1

It indicates an ES6 module file.

---

Node.js's original module system is CommonJs (which uses require and module.exports).

Since Node.js was created, the ECMAScript module system (which uses import and export) has become standard and Node.js has added support for it.

Node.js will treat .cjs files as CommonJS modules and .mjs files as ECMAScript modules. It will treat .js files as whatever the default module system for the project is (which is CommonJS unless package.json says "type": "module",).

See also: Differences between ES6 module system and CommonJs

Contraindicate

just for clarification, if you're using typescript and have a tsconfig and everything, and using .ts files, is it modules by default? – Allusive

If you're using TypeScript then you're using TypeScript modules. – Contraindicate

as of 2023, you can compile to *.mjs and *.cjs via *.mts and *.cts source file extensions. See typescriptlang.org/docs/handbook/… – Manicurist

Answer 2

.MJS file

• mjs an extension for EcmaScript modules
• An MJS file is a source code file containing an ES Module (ECMAScript Module) for use with a Node.js application.

• MJS files are written in JavaScript, and may also use the .JS extension outside of the Node.js context.

• ES Modules allow web and application developers to organize code into smaller reusable components.

ECMAScript 6 (ES6) introduced the specification for ES Modules, providing a standard for implementing modules in JavaScript. As of 2018, all major web browsers support ES Modules.

However, the popularity of modularized JavaScript pre-dates ES6. Node.js, a JavaScript runtime environment, used CommonJS as the specification for modules. Because so many existing applications were built with CommonJS, when Node.js added support for native ES modules, it controversially introduced the MJS file extension to differentiate the two and prevent applications from breaking.

NOTE: Some developers informally refer to MJS files as "Michael Jackson Script" files.

Romeyn

No one is ever going to use MJS if people keep calling it Michael Jackson Script/Soluition ... – Bedmate

Which Michael Jackson though, the late pop star or one of the authors of react-router? 😃 – Whoosh

If you aren't going to use mjs extensions, you can just beat it. – Edi

Thanks @Bedmate I thought it was Mary Jane Spiderman so I'm glad I've gotten over that misconception. – Lucilla

Answer 3

For clarity. As for devs/humans, it's easy to distinguish between a module file(.mjs) and a normal javascript file(.js)... because it's not always easy to determine even if you examine the code in the file.

There are also performance benefits which gives you more reason to consider using it. V8(JavaScript engine that powers Google Chrome) recommends the use of .mjs but it still depends on your situation. If you want to know more of it's advantages, check https://v8.dev/features/modules#mjs

Sinotibetan

Great link. I'd consider including some quotes. "On the Web, the file extension doesn’t really matter, as long as the file is served with the JavaScript MIME type text/javascript. The browser knows it’s a module because of the type attribute on the script element....During dev, the .mjs extension makes it crystal clear to you and anyone else looking at your project that the file is a module as opposed to a classic script. (It’s not always possible to tell just by looking at the code.) As mentioned before, modules are treated differently than classic scripts, so the difference is important!" – Chausses