結論
import jsonData from "./data.json" with { type: "json" };
with { type: "json" } とは?
with { type: "json" }
は 「インポートするモジュールが JSON であること」を明示する構文 です。
これは Node.js やブラウザの ES Modules(ECMAScript Modules, ESM)で JSON を importするための仕様 です。
なぜ普通のJSのようにインポートできないか
JavaScript(ES Modules)では、import できるのは基本的に .js などのスクリプトファイルだけです。
.json を import するときは、「これは JSON ですよ」と明示する必要があります。
- セキュリティのため
importでjsonを自由にロードできると、意図せず読み込んでしまうリスク
- パフォーマンスのため
jsパース時に余計なI/Oが発生する
- JSの動作と統一するため
importされたjsモジュールは「コード」だが、JSONは「データ」なので挙動が違う
with { type: "json" } を追加することでデータを安全に扱える