Node.jsを使ってサーバを起動する際に、React Iconsが原因のエラーが発生

はじめに

Viteを使って作成していたサイトをSSRに移行しようとしていた時に起きたエラーです。

server.jsなどを使ってサーバを立ち上げようとすると

SyntaxError: Named export 'BsSoundwave' not found. The requested module 'react-icons/bs/index.esm.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-icons/bs/index.esm.js';
const { BsSoundwave } = pkg;

というようなエラーが発生しました。

開発時のバージョン

使用技術	バージョン
Node.js	20.10.0
vite	4.4.5

解決法

こちらを参考にすることで解決をすることができました。

具体的には vite.config.tsに下記のコードを追加します。

vite.config.ts

export default defineConfig({

  // この部分を追加
  ssr: {
    noExternal: ["react-icons", ],
  },
});

以上でエラーが起きることなくサーバの立ち上げが可能になります。

おわりに

記事にする程の内容ではないと考えていましたが、react-helmet-asyncを導入した際にも同じようなエラーが発生し、同じ方法で解決できたこともあって、忘備録として残しておきます。

同じエラーに遭遇された方がいれば参考にしてください。