ES Modules in Node.js: Fixing "Warning: To load an ES module"

Problem

When working with modern JavaScript projects, particularly React applications, you may encounter this warning:

(node:9374) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

This warning occurs because Node.js needs to know whether your JavaScript files should be treated as CommonJS modules (the traditional Node.js format) or ES modules (the modern JavaScript standard used by React and frontend tooling).

The key difference is in the module syntax:

• CommonJS: Uses require() and module.exports
• ES Modules: Uses import and export

Solutions

Here are the most effective ways to resolve this issue:

1. Set "type": "module" in package.json (Recommended)

Add the following line to your package.json file:

{
  "name": "your-project",
  "version": "1.0.0",
  "type": "module",
  // ... other configuration
}

TIP

This is the most common and recommended approach for React projects and modern Node.js applications.

2. Use explicit file extensions in imports

When using ES modules, always include the file extension in your import statements:

// Incorrect
import React from "react";
import App from "./App";

// Correct
import React from "react";
import App from "./App.js";

3. Rename files to use .mjs extension

Alternatively, you can rename your JavaScript files with the .mjs extension:

# Rename your main file
mv app.js app.mjs

# Update imports to reference .mjs files
import { functionName } from './module.mjs';

4. For TypeScript users

If you're using TypeScript, ensure your tsconfig.json is configured correctly:

{
  "compilerOptions": {
    "module": "commonjs",
    // ... other options
  }
}

WARNING

Note that once you set "type": "module" in package.json, you can no longer use require() statements in your code. You'll need to convert all your imports to ES module syntax.

Complete Example

Here's a corrected version of the React component from the original question:

import React from "react";
import "./App.css";

function App() {
  return (
    <>
      <h1>ToDo</h1>
    </>
  );
}

export default App;

With the corresponding package.json:

{
  "name": "react-todo-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "dependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.1"
  }
}

Why These Solutions Work

Node.js introduced support for ES modules in version 12. The warning appears because Node.js defaults to CommonJS modules unless explicitly told otherwise. By setting "type": "module" in your package.json, you're telling Node.js to treat all .js files as ES modules instead of CommonJS modules.

Additional Considerations

• React Create React App: If you're using Create React App, it handles module configuration automatically, and you shouldn't normally need to modify package.json manually for module types.
• Node.js Version: While some answers suggest downgrading Node.js, this is not recommended. Instead, use a current Node.js version (16+) and the proper configuration.
• Mixed Projects: If your project contains both ES modules and CommonJS modules, you may need to use the .mjs extension for ES modules and .cjs for CommonJS modules.

INFO

Modern versions of Node.js (v14+) have stable ES module support, so the --experimental-modules flag mentioned in some older answers is no longer necessary.

By implementing these solutions, you'll resolve the ES module warning and ensure your project follows modern JavaScript standards.