ESモジュール読み込みエラーの解決方法：package.jsonの設定と対応策

問題の概要

Node.jsでReactアプリケーションを開発している際に、次のようなエラーメッセージが表示されることがあります：

(node:9374) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
/Users/nishihaider/workspace-ui/react-todo-app/src/App.js:1

このエラーは、Node.jsがES6モジュール構文（import/export）を認識できず、CommonJS構文（require()/module.exports）を期待している場合に発生します。

根本原因

Node.jsは、デフォルトではCommonJSモジュールシステムを使用します。ES6モジュール構文を使用するには、明示的に設定が必要です。

解決方法

方法1: package.jsonにtypeフィールドを追加（推奨）

最も簡単で一般的な解決方法は、package.jsonファイルに"type": "module"を追加することです。

{
  "name": "your-project-name",
  "version": "1.0.0",
  "type": "module",
  // その他の設定...
}

TIP

この設定を行うと、プロジェクト内のすべての.jsファイルがESモジュールとして扱われるようになります。

方法2: ファイル拡張子を.mjsに変更

package.jsonを変更せずにESモジュールを使用するには、ファイル拡張子を.jsから.mjsに変更します。

# ファイル名の変更
mv src/App.js src/App.mjs

// インポート時も.mjsを明示
import App from './App.mjs';

方法3: インポート時に拡張子を明示する

ESモジュールでは、インポート時にファイル拡張子を明示的に指定する必要があります。

// ❌ 間違い
import React from "react";
import "./App.css";
import App from "./App";

// ✅ 正しい
import React from "react";
import "./App.css";
import App from "./App.js"; // 拡張子を明記

方法4: TypeScriptを使用している場合の設定

TypeScriptプロジェクトでは、tsconfig.jsonのモジュール設定を確認してください。

{
  "compilerOptions": {
    "module": "commonjs" // または "ES2015", "ESNext"など
  }
}

WARNING

TypeScriptで"module": "ES2015"や"ESNext"を設定している場合、実行時にはCommonJSにトランスパイルされるようにするか、"type": "module"を追加する必要があります。

方法5: CommonJS構文への変更（非推奨）

どうしてもESモジュールを使用できない場合、CommonJS構文に戻す方法もあります。

// ESモジュール構文
import React from "react";
export default App;

// CommonJS構文
const React = require("react");
module.exports = App;

注意

この方法は現代のReact開発では推奨されません。可能な限りESモジュールを使用することをお勧めします。

Reactアプリケーションの正しい構造

元のコードには構文エラーもありました。Reactフラグメントの正しい使い方は以下の通りです：

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

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

export default App;

トラブルシューティング

Node.jsのバージョン確認

INFO

Node.jsのバージョンによってはESモジュールのサポート状況が異なります。バージョン12以上を使用することを推奨します。

```bash
node --version

実験的フラグの使用（古いバージョンのNode.js）

古いバージョンのNode.jsを使用している場合は、実験的フラグが必要な場合があります。

node --experimental-modules app.js

まとめ

ESモジュール関連のエラーを解決するには、以下のいずれかの方法を実施してください：

1. package.jsonに"type": "module"を追加（最も一般的な解決策）
2. ファイル拡張子を.mjsに変更
3. インポート時に拡張子を明示
4. TypeScriptの設定を確認

React開発ではESモジュールを使用することが標準となっていますので、適切な設定を行うことでこのエラーを解消できます。