Astroを使っていて「Could not find Sharp.」というエラーに対処したので備忘録です。
<h2 id="%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E6%A6%82%E8%A6%81" data-line="3" class="code-line"><a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E6%A6%82%E8%A6%81" aria-hidden="true"></a> エラーの概要</h2>
Astroでビルド時に2種類のエラーが出ました。
<aside class="msg alert">!<div class="msg-content">title: 'Could not transform image.', 
hint: 'This is often caused by a corrupted or malformed image. Re-exporting the image from your image editor may fix this issue.', 
frame: undefined, 
type: 'AstroError',
</div></aside>
<aside class="msg alert">!<div class="msg-content">title: 'Could not find Sharp.', 
hint: "See Sharp's installation instructions for more information: <a href="https://sharp.pixelplumbing.com/install" target="_blank" rel="nofollow noopener noreferrer">https://sharp.pixelplumbing.com/install</a>. If you are not relying on <code>astro:assets</code> to optimi 
ze, transform, or process any images, you can configure a passthrough image service instead of installing Sharp. See <a href="https://docs.astro.build/en/reference/errors/" target="_blank" rel="nofollow noopener noreferrer">https://docs.astro.build/en/reference/errors/</a> 
missing-sharp for more information.\n" + 
'\n' + 
'See <a href="https://docs.astro.build/en/guides/images/#default-image-service" target="_blank" rel="nofollow noopener noreferrer">https://docs.astro.build/en/guides/images/#default-image-service</a> for more information on how to migrate to another image service.', 
frame: undefined, 
type: 'AstroError'
</div></aside>
このエラーは通常、Astroプロジェクトで画像の最適化を行おうとした際に発生し、Sharpライブラリが見つからないことが原因です。
<h2 id="%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95" data-line="26" class="code-line"><a class="header-anchor-link" href="#%E8%A7%A3%E6%B1%BA%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 解決方法</h2>
そのままですが、Sharpライブラリが見つからないというエラーなので、Sharpをインストールすることで解決できます。
以下の手順に従って進めてください。
<ol data-line="31" class="code-line">
<li data-line="31" class="code-line">まず、Sharpをプロジェクトにインストールしましょう。</li>
</ol>
pnpm:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="34">pnpm add sharp
</code></pre></div>npm:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="39">npm install sharp
</code></pre></div>yarn:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="44">yarn add sharp
</code></pre></div><ol start="2" data-line="48" class="code-line">
<li data-line="48" class="code-line"><code>astro.config.mjs</code>ファイルで、Sharpが正しく設定されているか確認します。</li>
</ol>
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript code-line" data-line="50"># astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
 image: {
 service: { entrypoint: 'astro/assets/services/sharp' },
 },
});
</code></pre></div><ol start="3" data-line="61" class="code-line">
<li data-line="61" class="code-line">もし上記の手順で解決しない場合は、キャッシュをクリアしてみましょう。</li>
</ol>
pnpm:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="64">pnpm store prune
</code></pre></div>npm:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="69">npm cache clean --force
</code></pre></div>yarn:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="74">yarn cache clean
</code></pre></div><ol start="4" data-line="78" class="code-line">
<li data-line="78" class="code-line">最後に、依存関係を再インストールし、プロジェクトを再ビルドします。</li>
</ol>
pnpm:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="81">pnpm install --force
pnpm build
</code></pre></div>npm:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="87">npm ci
npm run build
</code></pre></div>yarn:
<div class="code-block-container"><pre class="language-shell"><code class="language-shell code-line" data-line="93">yarn install --force
yarn build
</code></pre></div><h2 id="%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" data-line="98" class="code-line"><a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> 参考リンク</h2>
<ul data-line="100" class="code-line">
<li data-line="100" class="code-line"><a href="https://docs.astro.build/" target="_blank" rel="nofollow noopener noreferrer">Astro公式ドキュメント</a></li>
<li data-line="101" class="code-line"><a href="https://sharp.pixelplumbing.com/" target="_blank" rel="nofollow noopener noreferrer">Sharpライブラリ</a></li>
</ul>

Astroを使っていてCould not find Sharp.エラーが出た時の対処法