この記事の概要
Bun を使って Astro で作ったサイトを動かそうとした際、Image
コンポーネントでエラーが発生しました。
500 (Internal Server Error)
になってしまったのですが、修正できたのでやり方を記事にしました。
環境
使っているもの | バージョン |
---|---|
astro | 3.2.4 |
bun | 1.0.5 |
結論
package.json
に trustedDependencies
として sharp
を追加する。
{
"trustedDependencies": [
"sharp"
]
}
node_modules/
と bun.lockb
を削除する。
rm -rf node_modules/ bun.lockb
依存関係をインストールし直す。
bun install
この状態で再度立ち上げれば、画像が正常に表示されるはずです。
何をやっているのか
Astro の Images の項にも記載があるように、pnpm などのパッケージマネージャーを使用する場合、sharp
という画像処理のライブラリを別途インストールする必要があります。1
ただし、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トークでお話してくださる方も募集中です!
-
Astro の package.json を見るに、
sharp
がoptionalDependencies
だから別途インストールする必要があるのかな?と思っていますが、正確なことは分かっていないので、詳しい人がいたら教えてください↩