Node.jsでimportが使えない？「Cannot use import statement outside a module」の解決法

Node.jsを使用していると、JavaScriptのESモジュールを利用する際に「Cannot use import statement outside a module」というエラーに直面することがあります。

Cannot use import statement outside a module

このエラーは、Node.jsがデフォルトでCommonJSモジュールを使用しているため、ESモジュールのimport文を正しく解釈できないことが原因です。

本記事では、このエラーの原因と解決策を詳しく解説し、実際のサンプルコードを交えて説明します。

Contents

1. エラーの原因を理解する

「Cannot use import statement outside a module」というエラーは、主に以下の理由で発生します。

  • モジュールの種類
    • Node.jsはデフォルトでCommonJSモジュールを使用します。これに対して、import文はESモジュールの構文であり、Node.jsがESモジュールとしてファイルを認識していない場合にエラーが発生します。
      Node.jsのバージョンによっては、ESモジュールのサポートが不完全な場合もあります。
  • package.jsonの設定
    • ESモジュールを使用するためには、プロジェクトのpackage.jsonファイルに"type": "module"を追加する必要があります。
      この設定がない場合、Node.jsはファイルをCommonJSとして扱います。
  • ファイル拡張子
    • ESモジュールを使用する場合、ファイルの拡張子を.mjsに変更することも一つの方法です。
      これにより、Node.jsはそのファイルをESモジュールとして認識します。

2. 解決策1: package.jsonの設定を確認する

最初の解決策は、package.jsonファイルの設定を確認することです。

以下の手順で設定を行います。

  1. プロジェクトのルートディレクトリにあるpackage.jsonファイルを開きます。
  2. "type": "module"を追加します。これにより、Node.jsはすべての.jsファイルをESモジュールとして扱います。
{
  "name": "my-project",
  "version": "1.0.0",
  "type": "module",
  "main": "index.js"
}

この設定を行うことで、import文を使用する際のエラーを回避できます。

3. 解決策2: ファイル拡張子を変更する

次の解決策は、JavaScriptファイルの拡張子を変更することです。ESモジュールを使用する場合、ファイルの拡張子を.mjsに変更することで、Node.jsはそのファイルをESモジュールとして認識します。

以下の手順で行います。

  1. 使用しているJavaScriptファイルの拡張子を.mjsに変更します。
  2. そのファイル内でimport文を使用します。

例えば、example.mjsというファイルを作成し、以下のように記述します。

import { myFunction } from './myModule.mjs';

myFunction();

このようにすることで、Node.jsはexample.mjsをESモジュールとして扱い、エラーを回避できます。

4. 解決策3: Babelを使用する

Babelを使用してESモジュールをCommonJSにトランスパイルすることも可能です。これにより、古いNode.jsバージョンでもESモジュールを使用できます。以下の手順でBabelを設定します。

  1. Babelと必要なプラグインをインストールします。
npm install --save-dev @babel/core @babel/preset-env @babel/register
  1. プロジェクトのルートに.babelrcファイルを作成し、以下の設定を追加します。
{
  "presets": ["@babel/preset-env"]
}
  1. start.jsというファイルを作成し、以下のように記述します。
require('@babel/register')({
  presets: ['@babel/preset-env']
});

module.exports = require('./server.js');

この設定を行うことで、BabelがESモジュールをCommonJSに変換し、エラーを回避できます。

5. 解決策4: Webpackや他のバンドラーを使用する

Webpackなどのモジュールバンドラーを使用することで、ESモジュールをCommonJSに変換し、エラーを回避することができます。Webpackの設定ファイルでESモジュールを適切に処理するように設定します。以下はWebpackを使用する際の基本的な設定手順です。

  1. Webpackをインストールします。
npm install --save-dev webpack webpack-cli
  1. プロジェクトのルートにwebpack.config.jsファイルを作成し、以下のように記述します。
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
  1. Webpackを実行して、バンドルを作成します。
npx webpack

このようにすることで、ESモジュールを使用したコードをバンドルし、エラーを回避できます。

6. まとめ

Node.jsで「Cannot use import statement outside a module」というエラーが発生した場合、主にpackage.jsonの設定やファイルの拡張子が原因です。上記の解決策を試すことで、ESモジュールを正しく使用できるようになります。Node.jsのバージョンやプロジェクトの構成に応じて、最適な方法を選択してください。

これにより、より効率的にJavaScriptのモジュールを管理し、開発を進めることができるでしょう。

参考

タイトルとURLをコピーしました