Bun + Astro で Image コンポーネントのエラーが出たので修正した

この記事の概要

Bun を使って Astro で作ったサイトを動かそうとした際、Image コンポーネントでエラーが発生しました。

500 (Internal Server Error) になってしまったのですが、修正できたのでやり方を記事にしました。

環境

使っているもの	バージョン
astro	3.2.4
bun	1.0.5

結論

package.json に trustedDependencies として sharp を追加する。

package.json

{
  "trustedDependencies": [
    "sharp"
  ]
}

node_modules/ と bun.lockb を削除する。

rm -rf node_modules/ bun.lockb

依存関係をインストールし直す。

bun install

この状態で再度立ち上げれば、画像が正常に表示されるはずです。

何をやっているのか

Astro の Images の項にも記載があるように、pnpm などのパッケージマネージャーを使用する場合、sharp という画像処理のライブラリを別途インストールする必要があります。¹

ただし、Bun の場合は単に bun install sharp を実行するだけでは足りません。

trusted dependency としてインストールする必要があります。

その上で、一度 node_modules/ と bun.lockb を削除してからインストール → 立ち上げを実行することで、期待する動きになります。

調べている最中に出てきた Issue など

astro.config.js の defineConfig の中で image: {service: passthroughImageService()} とするワークアラウンドが紹介されていました。

ただ、このやり方だと Astro の画像処理を使えなくなってしまうのでイマイチです。

Astro の config.d.ts を見るとコメントでそのように書いてあることが確認できます。

---

こちらの Issue を見て解決しました。

コメントでは「trustedDependencies を指定しても何も変わらない」と言っている人もいますが、その後のやり取りにあるように、恐らく node_modules/ と bun.lockb の削除忘れかと思います。

node_modules/ と bun.lockb を削除しないままだと、何度 bun install をやり直しても変化はありませんでした。

---

最後まで読んでくださってありがとうございます！
X (Twitter)でも情報を発信しているので、良かったらフォローお願いします！

Devトークでお話してくださる方も募集中です！

1. Astro の package.json を見るに、sharp が optionalDependencies だから別途インストールする必要があるのかな？と思っていますが、正確なことは分かっていないので、詳しい人がいたら教えてください ↩