ESLint Error: Must Use Import to Load ES Module

The ESLint error “must use import to load ES module” typically occurs when using the CommonJS require() syntax in a project configured for ECMAScript Modules (ESM). This error is important to address because it ensures compatibility with modern JavaScript standards, promoting better module management and interoperability in your codebase.

Understanding the Error

The ESLint error “Must use import to load ES Module” occurs when you try to use CommonJS require() syntax in a project configured to use ES Modules. Here are the specific conditions that trigger this error:

ES Module Configuration: Your package.json file has "type": "module".
CommonJS Syntax: You use require() instead of import.
ESLint Parser: ESLint is configured to parse ES Modules but encounters CommonJS syntax.

To fix this, ensure you use import statements for module loading and update your ESLint configuration if necessary.

Common Causes

Here are the common causes of the ‘ESLint error: must use import to load ES module’ along with examples:

Using CommonJS syntax in an ES module environment:

Cause: Mixing require with ES module syntax.

Example:

// Incorrect
const express = require('express');

// Correct
import express from 'express';

Incorrect type field in package.json:
- Cause: The type field is not set to module for ES modules.
- Example:
```
// Incorrect
{
  "type": "commonjs"
}
```
```
// Correct
{
  "type": "module"
}
```
Using .js extension without specifying module type:
- Cause: Not specifying the module type in package.json or using .js for ES modules.
- Example:
```
// Incorrect
import { myFunction } from './myModule.js';
```
```
// Correct
import { myFunction } from './myModule.mjs';
```
Outdated Node.js version:
- Cause: Using a Node.js version that does not fully support ES modules.
- Example:
```
// Incorrect
node app.js
```
```
// Correct (for Node.js 12.x)
node --experimental-modules app.mjs
```

Misconfigured TypeScript settings:

Cause: TypeScript configuration not aligned with ES module syntax.

Example:

// Incorrect tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs"
  }
}

// Correct tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",
    "esModuleInterop": true
  }
}

These are some common scenarios that lead to the ‘must use import to load ES module’ error.

Fixing the Error

Here’s a step-by-step guide to resolve the ‘ESLint error: must use import to load ES module’:

Step 1: Update `package.json`

Ensure your package.json file has the "type": "module" field to indicate that you’re using ES modules.

{
  "type": "module"
}

Step 2: Update ESLint Configuration

Add the @babel/eslint-parser to your devDependencies and configure ESLint to use it.

Install @babel/eslint-parser:

npm install --save-dev @babel/eslint-parser

Update .eslintrc.js:

module.exports = {
  parser: '@babel/eslint-parser',
  parserOptions: {
    requireConfigFile: false,
  },
  // other configurations
};

Step 3: Update TypeScript Configuration (if using TypeScript)

Ensure your tsconfig.json is set up to handle ES modules.

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "outDir": "./dist"
  }
}

Step 4: Use Correct Import Syntax

Ensure your code uses ES module syntax.

Correct:

import express from 'express';

Incorrect:

const express = require('express');

Step 5: Use Dynamic Imports if Necessary

For conditional imports, use dynamic imports.

if (condition) {
  import('module-name').then(module => {
    // Use the module
  });
}

Step 6: Run Node.js with Appropriate Flags (if necessary)

For Node.js versions 12.x to 13.x, you might need to run Node.js with the --experimental-modules flag.

node --experimental-modules your-script.js

For Node.js 14.x and later, this is not necessary if "type": "module" is set in package.json.

By following these steps, you should be able to resolve the ‘ESLint error: must use import to load ES module’ issue effectively.

Best Practices

To avoid encountering the ‘ESLint error: must use import to load ES module’ in future projects, follow these best practices:

Use ES Module Syntax:

Always use import and export instead of require and module.exports.

Example:

// Correct
import express from 'express';

// Incorrect
const express = require('express');

Configure package.json:
- Set "type": "module" in your package.json to ensure Node.js treats .js files as ES modules.
```
{
  "type": "module"
}
```

Update ESLint Configuration:

Use the @babel/eslint-parser to handle modern JavaScript syntax.

{
  "parser": "@babel/eslint-parser",
  "parserOptions": {
    "sourceType": "module"
  }
}

Ensure Correct File Extensions:
- Always include the .js extension in your import statements.
```
import { myFunction } from './myModule.js';
```
Node.js Version:
- Use Node.js version 14.x or later, which has better support for ES modules without experimental flags.
Third-Party Packages:
- Check if third-party packages support ES modules. If not, consider downgrading to a version that uses CommonJS.

TypeScript Configuration:

Ensure tsconfig.json is set up for ES modules.

{
  "compilerOptions": {
    "module": "esnext",
    "target": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true
  }
}

By following these practices, you can maintain a consistent coding standard and avoid module-related errors in your projects.

Maintaining Consistent Coding Standards

To avoid module-related errors and ensure a consistent coding standard, follow these key points:

Always use import and export instead of require and module.exports.
Set "type": "module" in your package.json to ensure Node.js treats .js files as ES modules.
Update ESLint configuration to handle modern JavaScript syntax using the @babel/eslint-parser.
Ensure correct file extensions by including .js in import statements.
Use Node.js version 14.x or later for better support of ES modules without experimental flags.
Check if third-party packages support ES modules and consider downgrading if necessary.
Set up TypeScript configuration to use ES modules, ensuring "module": "esnext" and "target": "esnext" in tsconfig.json.