TypeScriptで「Cannot use import statement outside a module」エラーが発生する原因と解決策

2024-04-09

TypeScriptで「Cannot use import statement outside a module」エラーが発生する原因と解決策

TypeScriptでimportステートメントを使用しようとすると、「Cannot use import statement outside a module」というエラーが発生することがあります。これは、モジュール外のコードでimportステートメントを使用しようとしていることが原因です。

原因

TypeScriptは、JavaScriptのスーパーセットであり、デフォルトではCommonJSモジュールシステムを使用します。CommonJSモジュールシステムでは、requireキーワードを使用してモジュールをインポートします。

一方、ES6モジュールシステムでは、importキーワードを使用してモジュールをインポートします。ES6モジュールシステムを使用するには、TypeScriptコンパイラにモジュールシステムを指定する必要があります。

解決策

このエラーを解決するには、以下のいずれかの方法があります。

tsconfig.jsonファイルを作成し、moduleプロパティを"es6"に設定します。

{
  "compilerOptions": {
    "module": "es6"
  }
}

--moduleフラグを使用する

TypeScriptコンパイラを実行する際に、--moduleフラグを"es6"に設定します。

tsc --module es6 file.ts

.mjsファイル拡張子を使用する

ES6モジュールファイルには、.mjsファイル拡張子を使用することができます。

import { add } from "./math.mjs";

console.log(add(1, 2)); // 3

バンドラーを使用する

Webpackなどのバンドラーを使用すると、ES6モジュールを自動的にバンドルすることができます。

補足

TypeScript 3.0以降では、デフォルトでES6モジュールシステムが使用されます。

CommonJSモジュールとES6モジュールは混在させることができます。

// main.ts

import { add } from "./math";

console.log(add(1, 2)); // 3

// math.ts

export function add(a: number, b: number): number {
  return a + b;
}

tsconfig.jsonファイル

{
  "compilerOptions": {
    "module": "es6"
  }
}

// main.ts

import { add } from "./math";

console.log(add(1, 2)); // 3

// math.ts

export function add(a: number, b: number): number {
  return a + b;
}

// compile

tsc --module es6 main.ts

// main.mjs

import { add } from "./math.mjs";

console.log(add(1, 2)); // 3

// math.mjs

export function add(a: number, b: number): number {
  return a + b;
}

その他の解決方法

ES6モジュールではなく、CommonJSモジュールとしてコードを実行したい場合は、require()関数を使用することができます。

// main.ts

const math = require("./math");

console.log(math.add(1, 2)); // 3

// math.ts

export function add(a: number, b: number): number {
  return a + b;
}

--esModuleInteropフラグを使用すると、CommonJSモジュールとES6モジュールを相互運用することができます。

// main.ts

import { add } from "./math";

console.log(add(1, 2)); // 3

// math.ts

exports.add = function(a: number, b: number): number {
  return a + b;
};

// compile

tsc --esModuleInterop main.ts