エラーの内容
TypeScriptコードにJSONファイルをインポートしようとすると、コンパイラが以下のエラーを出力します：
Module './config.json' was resolved to '/path/to/config.json', but '--resolveJsonModule' is not specified.
より厳格な設定の場合：
Cannot find module './config.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.
インポート文はおそらく次のような形式になっているはずです：
import config from './config.json';
console.log(config.apiUrl);
TypeScriptは.json拡張子を検知すると、明示的なオプトインなしではそのファイルを処理しません。
根本原因
TypeScriptではデフォルトでJSONのインポートが無効になっています。resolveJsonModuleフラグを有効にしない限り、コンパイラは.jsonファイルを処理しません。このフラグを有効にすると、TypeScriptはそのファイルを正規のモジュールとして扱い、型の形状を自動的に推論します。このフラグがない場合、ファイルがディスク上に存在し、実行時にNode.jsが正常に読み込めるとしても、import ... from '*.json'はコンパイル時に失敗します。
このエラーは、JSからTSへの移行時や、JavaScriptプロジェクトのインポートパターンをそのままTypeScriptプロジェクトにコピーした際に最もよく発生します。
修正方法1：tsconfig.jsonでresolveJsonModuleを有効にする（推奨）
tsconfig.jsonを開き、compilerOptions内に"resolveJsonModule": trueを追加します：
{
"compilerOptions": {
"target": "ES2020",
"module": "commonjs",
"resolveJsonModule": true,
"esModuleInterop": true,
"strict": true,
"outDir": "./dist"
}
}
ほとんどのプロジェクトではこれだけで解決します。ファイルを保存してビルドを実行すると、エラーが消えます。
さらに、TypeScriptがJSONの形状を自動的に推論するようになります。追加のアノテーションなしで、完全な型チェックとオートコンプリートが利用できます：
// config.json
{
"apiUrl": "https://api.example.com",
"timeout": 5000
}
// app.ts
import config from './config.json';
// TypeScript が認識する型：config.apiUrl は string、config.timeout は number
console.log(config.apiUrl.toUpperCase()); // ✓ 型安全
修正方法2：コマンドラインでフラグを渡す
設定ファイルなしで直接tscを実行している場合は、フラグをインラインで渡します：
tsc --resolveJsonModule src/app.ts
単発のコンパイルには使えますが、実際のプロジェクトではtsconfig.jsonを使用してください。設定を永続化してバージョン管理で追跡できます。
修正方法3：フレームワーク別の注意点
Vite
ViteはバンドラーレベルでJSONインポートを処理するため、実行時はファイルが正常に読み込まれます。ただし、型チェックのためにTypeScriptは依然としてフラグが必要です。tsconfig.json（または新しいViteのスキャフォールドではtsconfig.app.json）にresolveJsonModule: trueを追加すると、tscとIDEの両方でエラーが解消されます。
Next.js
Next.jsは独自のtsconfig.jsonを管理しており、最近のバージョン（13以降）ではデフォルトでresolveJsonModuleが含まれています。古いプロジェクトには含まれていない場合があるため、このエラーが発生した場合はフラグを手動で追加してください。Next.jsは明示的に設定された値を上書きしません。
ts-node
ts-nodeを使用する場合、最もシンプルな方法はtsconfig.jsonを利用することです。ワンライナーで素早く対応したい場合は以下のようにします：
ts-node --compiler-options '{"resolveJsonModule":true}' src/script.ts
修正の確認
出力ファイルを生成せずに型チェックのみを実行して、問題がないことを確認します：
# 型チェックのみ（出力ファイルなし）
npx tsc --noEmit
# またはフルビルド
npx tsc
JSONインポートエラーがゼロであれば、修正は成功です。VS CodeまたはWebStormでインポートしたオブジェクトにカーソルを合わせると、ツールチップにJSONファイルの正確なキーと値の型を持つ推論された型が表示されるはずです。
tsconfig.jsonを編集してもエラーが続く場合は、ビルドツールが実際にどの設定ファイルを読み込んでいるか確認してください。tsconfig.app.jsonやtsconfig.build.jsonなど、複数のtsconfigファイルを持つプロジェクトでは、一方にフラグがあっても、コンパイル時に使用されるファイルには含まれていないケースがよくあります。
注意点：moduleResolution
"moduleResolution": "bundler"、"node16"、または"nodenext"を使用している場合、デフォルトインポートを正しく動作させるにはresolveJsonModuleと合わせて"esModuleInterop": trueも必要です：
{
"compilerOptions": {
"moduleResolution": "node16",
"resolveJsonModule": true,
"esModuleInterop": true
}
}
esModuleInteropを使用しない場合は、代わりに名前空間インポートを使用します：
import * as config from './config.json';
// vs.
import config from './config.json'; // esModuleInterop が必要
予防策
プロジェクトテンプレートにresolveJsonModule: trueを追加しておくことで、リポジトリをクローンした次の人が同じ問題に直面せずに済みます。ViteやCreate React Appなど、多くのスキャフォールドには現在これが含まれています。素のtsc --initには含まれていません。
JSONファイルが複雑になってきた場合（ネストされたオブジェクト、混在する型など）、コンパイラに渡す前にバリデーションを行いましょう。ToolCraftのJSON Formatterに貼り付けるだけで構文エラーをすぐに検出できます。すべてブラウザ上で動作し、データがアップロードされることはありません。TypeScript設定の問題を追いかける前に、JSONファイルの不正な形式を除外しておきましょう。
JSONとYAML両方の設定ファイルを混在させているプロジェクトには、ToolCraftのYAML ↔ JSON Converterが役立ちます。必要に応じて設定ソースを統合する際に便利です。