ESLint ES Module Support

Problem

When setting up ESLint with modern JavaScript/TypeScript projects, you may encounter the error:

Error: Must use import to load ES Module

This error occurs when ESLint tries to parse ES module files using CommonJS require() syntax, typically due to configuration mismatches between your project setup and ESLint's parser.

The error message often points to internal ESLint dependencies rather than your actual source code, making it confusing since you might not be using require() anywhere in your project.

Solution

Update to Modern ESLint Parser (Recommended)

The most common cause is using the deprecated babel-eslint parser, which doesn't properly support ES modules. Upgrade to the official @babel/eslint-parser:

1. Install the new parser:

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

2. Update your ESLint configuration (.eslintrc.js, .eslintrc.json, or .eslintrc.cjs):

   {
     "parser": "@babel/eslint-parser",
     "parserOptions": {
       "ecmaVersion": "latest",
       "sourceType": "module",
       "requireConfigFile": false,
       "babelOptions": {
         "presets": ["@babel/preset-env"]
       }
     }
   }

File Extension Solutions

If your project uses ES modules ("type": "module" in package.json), ESLint configuration files need special handling:

Option 1: Rename to .eslintrc.cjs

mv .eslintrc.js .eslintrc.cjs

Option 2: Use JSON format

mv .eslintrc.js .eslintrc.json

Update Node.js Version

Ensure you're using a Node.js version with full ES module support (v16+ recommended):

# Using nvm (Node Version Manager)
nvm install 16
nvm use 16

Complete Configuration Example

Here's a working ESLint configuration for ES module projects:

// .eslintrc.cjs
module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parser: '@babel/eslint-parser',
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    requireConfigFile: false,
    babelOptions: {
      presets: ['@babel/preset-env'],
    },
  },
  plugins: ['@typescript-eslint'],
  rules: {
    // Your custom rules
  },
};

Troubleshooting

WARNING

If using Visual Studio Code, you may need to reload the IDE after making ESLint configuration changes for them to take effect.

If the error persists:

1. Clear node_modules and reinstall:

   rm -rf node_modules
   npm install

2. Check for conflicting parser configurations in extended configs

3. Ensure @babel/core is installed:

   npm install @babel/core --save-dev

Additional Tips

• For React Native projects using eslint-config-react-native-community, ensure it uses @babel/eslint-parser instead of babel-eslint
• TypeScript projects should use @typescript-eslint/parser for TypeScript-specific parsing
• Always specify sourceType: 'module' when working with ES modules

INFO

The error occurs because newer versions of ESLint dependencies are published as ES modules, while older parsers like babel-eslint attempt to load them using CommonJS require().

By updating your parser and configuration, you'll resolve the ES module compatibility issues and ensure ESLint works correctly with modern JavaScript modules.