この記事の概要
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だから別途インストールする必要があるのかな？と思っていますが、正確なことは分かっていないので、詳しい人がいたら教えてください
↩