Astroでreact-iconsを使う方法

AstroでReact-iconnsが使えない！？

SSGに特化したWeb開発フレームワークで有名なAstroですが、ビルド時にreact-iconsが使えないという問題が開発中に発生しました。
ローカル環境だとうまく動作するのですが、ビルド時、あるいは本番環境で500エラーが起きる可能性があります。
実際に開発中のプロジェクトで次のような書き方をしてVercelにデプロイしたところ500エラーが起きました。

import { IoLogoGithub } from 'react-icons/io5';

原因はVite

AstroではバンドルツールにViteが採用されています。Viteではバンドルの際にCJSが用いられ、このインポート方法でエラーが起こります。(おそらく厳密ではありません。悪しからず)

解決方法

1. CJS記法に倣う

   import pkg from 'react-icons/io5';
   const { IoLogoGithub } = pkg;
   

   CJSに倣った書き方です。しかし、これでは逐一パッケージを定数にインポートしてから分割代入で取り出す作業が必要になり、冗長かつ使いたいアイコンの数だけパッケージを定義しなければなりません。
2. Viteの設定を変更する(推奨)
   astro.config.mjs

   import { defineConfig } from "astro/config";
   
   export default defineConfig({
     ...,
     vite: {
       ssr: {
         noExternal: ["react-icons"],
       },
     },
   });
   

   Viteがreact-iconsのファイルをバンドルしないようにastro.config.mjsを変更します。
   こちらのissuesから拝借しました。

おわりに

Astroは多くのスタックを柔軟に取り入れることのできるフレームワークであるという長所ゆえの、このようなエラーやコンフリクトが起こりやすい短所も持っています。ドキュメントは非常に親切ですが、カバーしきれていない部分も非常にたくさんあります。そんなときはGitHubのissuesを除いてみてください