【Astro】インポート宣言が、'hoge' のローカル宣言と競合しています。の解決方法

はじめに

Astroでファイルを作成した際に発生したエラーについて、解決方法を共有します。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

問題

pages配下のabout.astroで、components配下のAbout.astroをインポートしようとした際にエラーが発生しました。以下がディレクトリ構造です：

ディレクトリ構造

src/
├── components/
│   └── About.astro
├── pages/
│   └── about.astro

修正前コード

---
import About from '../components/About.astro';
import Layout from '../layouts/Layout.astro';
---

<Layout>
	<About />
</Layout>

解決方法

インポート名を変更することで、エラーを回避できました。
以下が修正後のコードです。

---
import AboutComponent from '../components/About.astro';
import Layout from '../layouts/Layout.astro';
---

<Layout>
	<AboutComponent />
</Layout>

ファイル名の大文字と小文字の違い (About vs about) が原因で、Astroやファイルシステムが異なるファイルとして認識しつつも、macなどでは競合が発生してしまし正しくファイルを認識しないことがあるようです。

終わりに

今回のエラーはAstro特有の問題ではなく、ファイル名の大文字小文字の扱いに起因するものです。他の言語や環境でも同様の問題が発生する可能性があるため、ファイル名には注意して設計したいと思います。特に似たような名前のファイルを避けることが重要だと感じました。

参考

『大文字・小文字が引き起こすパス問題: Next.jsプロジェクトにおけるMacとWindowsの違い』Zenn