TypeScript の import で ERR_MODULE_NOT_FOUND でつまづいた

概要

TypeScript のモジュールシステムを使用した際におきた、エラーコード ERR_MODULE_NOT_FOUND のエラーを解決します。

環境

• Mac M1
• Node v20.10.0
• pnpm 8.12.1
• TypeScript 5.3.2

起きていた事象

以下の同階層に存在するそれぞれのファイルで以下のようにモジュールシステムを使用していました。

hoge.ts

export const hoge: string = 'hoge'

piyo.ts

import { hoge } from './hoge.ts'

console.log(hoge)

これらファイルに対して、以下のコマンドでコンパイルし、実行していました。

pnpm tsc && node ./piyo.js

しかし、これを実行すると、Error [ERR_MODULE_NOT_FOUND]: Cannot find module ~ とエラーが返ってきました。

解決策

piyo.ts で hoge.ts の hoge 変数を import している箇所で以下のように変更する必要があります。

piyo.ts

- import { hoge } from './hoge.ts'
+ import { hoge } from './hoge.js'

console.log(hoge)

このように変更する理由は、最初に TypeScript で記述されたソースコードを JavaScript にトランスパイルし、JavaScript のファイルとして実行するため、実行時に import 元のファイルは {ファイル名}.js に変換されているからです。
つまり、実行時には{ファイル名}.jsとして呼び出されるからということですね。