TypeScriptで開発を進めていると、時折「Cannot use 'import.meta' outside a module」というエラーに遭遇することがあります。このエラーは、モジュールシステムの設定に関連しており、適切な対処をすることで解決できます。本記事では、このエラーの原因と具体的な解決方法について詳しく解説します。

エラーの原因

「Cannot use 'import.meta' outside a module」エラーは、主に以下の理由で発生します：

1. ファイルがモジュールとして認識されていない

2. TypeScriptの設定が適切でない

3. 古いバージョンのTypeScriptを使用している

解決方法

1. ファイルをモジュールとして認識させる

最も簡単な解決方法は、ファイルの先頭に`export {}`を追加することです。これにより、ファイルがモジュールとして扱われるようになります。

export {};

// 以下、通常のコード
console.log(import.meta.url);

2. tsconfig.jsonの設定を変更する

`tsconfig.json`ファイルの`compilerOptions`セクションに以下の設定を追加または変更します：

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node"
  }
}

これにより、TypeScriptがESモジュールを正しく扱えるようになります。

3. TypeScriptのバージョンを更新する

`import.meta`はTypeScript 3.8以降でサポートされています。古いバージョンを使用している場合は、最新バージョンにアップデートしてください。

npm install -g typescript@latest

4. ファイル拡張子を変更する

`.ts`ファイルを`.mts`（モジュールTypeScript）に変更することで、明示的にモジュールファイルとして扱われるようになります。

5. パッケージ設定の確認

`package.json`ファイルに`"type": "module"`を追加することで、プロジェクト全体をESモジュールとして扱うことができます：

{
  "type": "module"
}

まとめ

「Cannot use 'import.meta' outside a module」エラーは、適切な設定とモジュールの扱い方を理解することで解決できます。上記の方法を順に試していくことで、ほとんどの場合このエラーを解消することができるでしょう。

TypeScriptの開発において、モジュールシステムの理解は非常に重要です。このエラーを解決する過程で、モジュールの概念やTypeScriptの設定についての理解も深まることでしょう。常に最新のTypeScriptバージョンを使用し、プロジェクトの設定を適切に管理することで、スムーズな開発が可能になります。