Node.js importエラー解決

JavaScriptのNode.jsにおける「SyntaxError: Unexpected token import」エラーについて

エラーの意味
「SyntaxError: Unexpected token import」は、JavaScriptのNode.js環境で、importキーワードを使用しようとした際に発生するエラーです。これは、Node.jsのデフォルトのCommonJSモジュールシステムでは、importキーワードがサポートされていないためです。

原因

• ES6モジュールシステム
  importキーワードはES6モジュールシステムで導入されたもので、Node.jsでも使用できますが、特別な設定が必要です。
• CommonJSモジュールシステム
  Node.jsはデフォルトでCommonJSモジュールシステムを採用しており、モジュールの読み込みにはrequire()関数を使用します。

解決方法

1. CommonJSモジュールシステムを使用
   

   • require()関数を使用してモジュールを読み込みます。
   • 例:

     const myModule = require('./myModule');
     

2. ES6モジュールシステムを使用
   

   • package.jsonファイルのtypeフィールドを"module"に設定します。
   • 例:

     {
       "type": "module"
     }
     

   • importキーワードを使用してモジュールを読み込みます。
   • 例:

     import myModule from './myModule';
     

注意

• Node.jsのバージョンによっては、ES6モジュールシステムをサポートしていない場合があります。
• ES6モジュールシステムを使用する場合、ファイルの拡張子を.mjsにすることもできます。

Node.jsの「SyntaxError: Unexpected token import」エラーと解決方法のコード例

// main.js
const myModule = require('./myModule');

console.log(myModule.hello());

// myModule.js
module.exports = {
  hello: () => {
    return 'Hello from myModule!';
  }
};

• myModule.jsはCommonJSモジュール形式で、module.exportsを使用してエクスポートしています。
• main.jsでrequire()関数を使用してmyModuleモジュールを読み込んでいます。

// package.json
{
  "type": "module"
}

// main.js
import myModule from './myModule.js';

console.log(myModule.hello());

// myModule.js
export default {
  hello: () => {
    return 'Hello from myModule!';
  }
};

• myModule.jsはES6モジュール形式で、export defaultを使用してエクスポートしています。
• package.jsonのtypeフィールドを"module"に設定して、ES6モジュールシステムを使用することを示しています。

ファイル拡張子を.mjsにする例:

// main.js
import myModule from './myModule.mjs';

console.log(myModule.hello());

// myModule.mjs
export default {
  hello: () => {
    return 'Hello from myModule!';
  }
};

• ファイル拡張子を.mjsにすることで、Node.jsにES6モジュールシステムを使用することを明確に示します。

エラーが発生する例

// main.js
import myModule from './myModule'; // ここでエラーが発生します

console.log(myModule.hello());

• 以下は、require()関数を使用した例です:
• 従来のNode.jsのモジュールシステムであり、require()関数を使用してモジュールを読み込みます。

const myModule = require('./myModule');

console.log(myModule.hello());

• 以下は、importキーワードを使用した例です:
• Node.jsのバージョン12.0以降でデフォルトでサポートされています。
• importキーワードを使用してモジュールを読み込むことができる新しいモジュールシステムです。

import myModule from './myModule.js';

console.log(myModule.hello());

• 以下は、ファイル拡張子を.mjsにした例です:

import myModule from './myModule.mjs';

console.log(myModule.hello());

Babelを使用してES6モジュールをトランスパイルする

• この方法を使用すると、古いNode.jsバージョンでもES6モジュールを使用することができます。
• Babelを使用してES6モジュールをCommonJSモジュールに変換することができます。

// .babelrc
{
  "presets": [
    "@babel/preset-env"
  ]
}

// main.js
import myModule from './myModule.js';

console.log(myModule.hello());

Webpackなどのバンドラーを使用する

• 以下は、Webpackを使用してモジュールをバンドルする例です:
• バンドラーを使用すると、モジュール間の依存関係を管理しやすくなります。
• Webpackなどのバンドラーを使用することで、複数のモジュールを1つのファイルにバンドルすることができます。

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

// main.js
import myModule from './myModule.js';

console.log(myModule.hello());