react-helmet-asyncでError when evaluating SSR moduleの対処について

Remix（vite）で react-helmet-async を利用しようとした際に発生したエラーの対処方法について記載します。誰かの時短になれば幸いです。

エラー内容

react-helmet-async を使用しようとすると、以下のエラーが発生しました：

[vite] Named export 'Helmet' not found. The requested module 'react-helmet-async' 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-helmet-async';
const {Helmet} = pkg;
    at analyzeImportedModDifference (file:///Users/hirosue/private/workspace/my-remix-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54049:19)
    at nodeImport (file:///Users/hirosue/private/workspace/my-remix-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55101:9)
    at async ssrImport (file:///Users/hirosue/private/workspace/my-remix-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:54998:24)
    at async eval (/Users/hirosue/private/workspace/my-remix-app/app/root.tsx:5:31)
    at async instantiateModule (file:///Users/hirosue/private/workspace/my-remix-app/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55058:9

対処方法

このエラーは、react-helmet-async が CommonJS モジュールとしてエクスポートされているため、名前付きエクスポートとしてインポートできないことが原因です。この問題を解決するには、以下のようにデフォルトエクスポートとしてインポートし、必要なコンポーネントを取得します。

修正内容

- import { Helmet } from 'react-helmet-async';
+ import * as HelmetAsync from 'react-helmet-async'; // デフォルトエクスポートとしてインポート
+ const { Helmet } = HelmetAsync; // 必要なコンポーネントを取得