[TypeScript] "Uncaught ReferenceError: exports is not defined" というエラーの解消方法

tsファイルをコンパイルしたjsファイルで"Uncaught ReferenceError: exports is not defined" というエラーが発生する時の解消方法について説明します。初心者による自分用のメモなので参考程度にしてください。

エラーの原因は？

以下の部分でエラーが発生していました。

Object.defineProperty(exports, "__esModule", { value: true });

このエラーの原因は、ES ModulesではなくCommonJSでコンパイルされていることによります。

tsconfig.jsonを編集します。tsconfig.jsonファイルがない場合は、プロジェクトのルートディレクトリで、以下のコマンドを実行します。

npx tsc --init

次のように書き換えます。

"module": "commonjs",
↓
"module": "ES6",

以下のコマンドでtsファイルをjsファイルにコンパイルします。

tsc

これで、プロジェクト内の全てのtsファイルがjsファイルにコンパイルされます。

メモ: 以下のようなコマンドでは、なぜかCommonJSのjsファイルになってしまいました。原因はよくわかっていません。

tsc index.ts

それでも改善しない時は、Webブラウザをスーパーリロード(Chrome: Ctrl + F5)してください。

繰り返しになりますが、初心者による自分用のメモなので、参考程度にしてください。

現在はフレームワークのNext.jsを使用しています。コンパイルとか考えなくても自動的にやってくれるので楽です。