Panda CSSで設定していたデザインパターンがエクスポートエラーになった

Posted at 2026-07-02

独自の設定（共通のデザインパターンなど）を修正していないにも関わらず、いきなり画面に反映されなかったり、「そんな名前のモジュールは存在しない」といったエクスポートエラーがブラウザのコンソールに出たりすることがあります。

発生した問題

設定ファイル（configファイル）に新しい共通のデザインパターンを追加していて、いつも通りコンポーネント側から呼び出したところ、以下のようなエラーがブラウザのコンソールに表示されました。

コンソールのエラー例
Uncaught SyntaxError: The requested module '/styled-system/patterns/index.mjs' does not provide an export named '⚪︎⚪︎.jsx'

今まで問題なく動いていたプロジェクトで急に発生したり、パッケージの更新通知が来たタイミングなどで発生することがあります。

このエラーの原因は、「自分が追加した設定ファイルの内容」と「自動生成される内部のコード（styled-system）」の同期ズレにあります。

Panda CSSは、設定ファイルに記述された内容を読み込んで、裏側で自動的に利用可能な関数やクラスを styled-system というディレクトリ内に生成（ビルド）しています。しかし、以下のような理由で生成がうまくいかないことがあります。

結果として、コンポーネント側は「新しく追加された設定」を呼び出そうとしているのに、自動生成されたファイル側にはまだそのデータが存在しないため、エラーが発生します。

自動生成されたファイルやキャッシュを一度リセットし、最新の設定をもとに再生成を行うことで解決できます。以下の手順を順番に試してください。

ただの再生成ではなく、一度生成先ディレクトリを完全に初期化してから作り直すコマンドを実行します。ターミナルで以下のコマンドを実行してください。

# お使いのパッケージマネージャー（npmやyarnなど）に合わせて実行してください
npx panda codegen --clean

--clean フラグを付与することで、古いキャッシュが一掃され、最新の設定ファイルの内容が100%反映された状態のファイルが正しく出力されます。

自動生成ファイルが新しくなっても、Viteなどの開発サーバーが古いデータをメモリ上にキャッシュしている場合があります。