ESLint - ESモジュール読み込みエラーの解決方法

問題の概要

React、TypeScript、Webpackなどを使用したプロジェクトでESLintを実行すると、以下のエラーが発生します：

Error: Must use import to load ES Module

このエラーは、.jsや.ts、.tsxファイルすべてで発生し、ファイルにインポート文が含まれているかどうかに関わらず表示されます。

エラーの根本原因: ESLintがESモジュールを正しく解析できないために発生します。特に、プロジェクトのpackage.jsonで"type": "module"が指定されている場合、CommonJS形式のrequire()ではESモジュールを読み込めないためこの問題が起こります。

解決方法

方法1: ESLintパーサーの更新（推奨）

最も効果的な解決策は、非推奨となったbabel-eslintパーサーから新しい@babel/eslint-parserに移行することです。

手順

パッケージのインストール:

bash

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

ESLint設定の更新 (.eslintrc.jsまたは.eslintrc.json):

json

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

TIP

requireConfigFile: falseはBabel設定ファイルが存在しない場合に必要です。既存のBabel設定がある場合は、このオプションを省略してください。

方法2: ESLint設定ファイルの拡張子変更

プロジェクトのpackage.jsonで"type": "module"が指定されている場合、ESLint設定ファイルの拡張子を.cjsに変更する方法もあります。

.eslintrc.jsを.eslintrc.cjsにリネーム
ファイル内容をCommonJS形式に変更:
javascript
```
module.exports = {
  // 設定内容
};
```

方法3: Node.jsのバージョンアップデート

古いNode.jsバージョンではESモジュールのサポートが不十分な場合があります：

bash

nvm install 16
nvm use 16

現在のLTSバージョン（Node.js 16以上）を使用することで、ESモジュール関連の問題の多くが解決されます。

方法4: ESLintキャッシュのクリア

場合によっては、キャッシュや拡張機能の問題が原因となることもあります：

node_modulesフォルダとpackage-lock.jsonを削除
npm installで再インストール
VS Codeを使用している場合、ESLint拡張機能を再インストール

よくある質問

Q: すべてのファイルでエラーが発生するのはなぜですか？

A: ESLintのパーサー設定がプロジェクト全体に適用されるため、パーサーに問題がある場合にはすべてのファイルでエラーが発生します。

Q: TypeScriptプロジェクトでは追加の設定が必要ですか？

A: TypeScriptを使用する場合は、@typescript-eslint/parserの使用も検討してください：

json

{
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  }
}

まとめ

ESLintの「Must use import to load ES Module」エラーは、主に以下のいずれかの方法で解決できます：

パーサーの更新: babel-eslint → @babel/eslint-parser
設定ファイルの拡張子変更: .js → .cjs
Node.jsのバージョンアップデート: v14以上への更新
キャッシュのクリア: node_modulesとESLintキャッシュの削除

現在のベストプラクティスは、方法1のパーサー更新を行うことです。これは最新のESLintとBabelのバージョンに対応しており、ほとんどの現代的なJavaScriptプロジェクトで正常に動作します。

関連記事

ESLint - ESモジュール読み込みエラーの解決方法 ​

問題の概要 ​

解決方法 ​

方法1: ESLintパーサーの更新（推奨） ​

手順 ​

方法2: ESLint設定ファイルの拡張子変更 ​

方法3: Node.jsのバージョンアップデート ​

方法4: ESLintキャッシュのクリア ​

よくある質問 ​

Q: すべてのファイルでエラーが発生するのはなぜですか？ ​

Q: TypeScriptプロジェクトでは追加の設定が必要ですか？ ​

まとめ ​