【Next.js × Vitest】Failed to load PostCSS config : [TypeError] Invalid PostCSS Plugin found at: plugins[0]の解決方法

はじめに

Next.jsとVitestを使ってテストを実行していた際に発生したエラーについての記事です。

この記事は個人的なアウトプットを目的として作成したものです。そのため、誤った情報や不足している内容が含まれている可能性があります。もし間違いや気になる点がございましたら、ぜひご指摘いただけますと幸いです。

現象

テスト実行時に以下のようなエラーが発生しました。

Failed to load PostCSS config : [TypeError] Invalid PostCSS Plugin found at: plugins[0]

原因

エラーの原因はTailwind CSSのPostCSS設定方法の違い でした。

Next.jsプロジェクト作成時にcreate-next-appでTailwindを選択する場合と、自分で追加インストールする場合で設定の差がありました。

create-next-app で自動設定された場合

postcss.config.mjs

const config = {
  plugins: ["@tailwindcss/postcss"],
};

export default config;

TailwindCSS v4 で推奨される設定

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

Tailwind CSS v4では@tailwindcss/postcssをオブジェクト形式で記述する必要がある ため、配列形式で記述するとInvalid PostCSS Pluginエラーが出ていました。

解決方法

postcss.config.mjsを修正し、以下のようにオブジェクト形式で書き直すことで解決しました。

postcss.config.mjs

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

終わりに

自動生成コードのまま使うとエラーになることが分かりよかったです。

参考