✅ TypeScriptエラー「Import 'xxx' conflicts with local value」の対処法

書いていたもの

// BodyPartMenu関数の引数に渡すオブジェクトの型を定義している
import { BodyPartMenu } from "../types/bodyPartMenu"

export default function BodyPartMenu({
  name,
  time,
  calories,
  icon = '🏋️',
}:BodyPartMenu) {
  return (
    <div className="bg-white rounded-xl shadow flex flex-col p-4 transition hover:bg-blue-50 hover:shadow-lg">
     ......
     .......

💥 エラー内容

Import 'BodyPartMenu' conflicts with local value, so must be declared with a type-only import when 'isolatedModules' is enabled.ts(2865)

🧠 原因

• 関数の引数用にで使っている 型の名前 と コンポーネント（関数）の名前 が 同じ
• tsconfig.json の isolatedModules: true 設定により、型と値が混ざるのを禁止している

---

❌ （再掲）NG例

import { BodyPartMenu } from "../types/bodyPartMenu" // ← 型だけど普通のimport

export default function BodyPartMenu({ name }: BodyPartMenu) {
  ...
}

一番最初に上げた自分の例のように
このままだと、BodyPartMenu が「型」と「関数」で名前かぶってエラーになる！

---

✅ 解決方法①：import type を使う！

import type { BodyPartMenu } from "../types/bodyPartMenu"

export default function BodyPartMenu({ name }: BodyPartMenu) {
  ...
}

これで「これは型専用importだよ」と明示することで解決💡

---

✅ 解決方法②：型と関数の名前を分ける（おすすめ）

import type { BodyPartMenu as WorkoutItemProps } from "../types/bodyPartMenu"

export default function BodyPartMenu({ name }: WorkoutItemProps) {
  ...
}

メリット

• 型と関数で意味を分けられて 読みやすい
• 今後の保守性・拡張性も高い！

---

✅ まとめ

状況	対応方法
型だけ使う	import type { XXX } from ...
型名と関数名がかぶる	as で別名にする or 関数名を変える

---