🤢
Next.js + Tailwind v4にStorybookを導入しようとしたらハマった話
動作環境
| package | version |
|---|---|
| next | 15.2.3 |
| tailwindcss | 4.0.15 |
| storybook | 8.6.7 |
| node | 22.14.0 |
遭遇した事象
下記の公式ドキュメントを参考に、新しく作成した Next.js プロジェクトに Storybook を導入したところ、ビルドエラーが発生する問題に遭遇しました。
また、Storybook を起動することはできるものの、ずっとローディングが表示されたままで何も表示されないという状態でした。
ビルドのログ
> storybook build
@storybook/core v8.6.7
info => Cleaning outputDir: storybook-static
info => Loading presets
info => Building manager..
info => Manager built (67 ms)
info => Building preview..
info Using tsconfig paths for react-docgen
vite v6.2.2 building for production...
✓ 20 modules transformed.
✗ Build failed in 50ms
=> Failed to build the preview
[vite:css] Failed to load PostCSS config (searchPath: .): [TypeError] Invalid PostCSS Plugin found at: plugins[0]
(@./postcss.config.mjs)
TypeError: Invalid PostCSS Plugin found at: plugins[0]
(@./postcss.config.mjs)
at file://./node_modules/.pnpm/vite@6.2.2_@types+node@20.17.25_jiti@2.4.2_lightningcss@1.29.2_terser@5.39.0/node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:14920:15
at Array.forEach (<anonymous>)
at plugins (file://./node_modules/.pnpm/vite@6.2.2_@types+node@20.17.25_jiti@2.4.2_lightningcss@1.29.2_terser@5.39.0/node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:14902:10)
at processResult (file://./node_modules/.pnpm/vite@6.2.2_@types+node@20.17.25_jiti@2.4.2_lightningcss@1.29.2_terser@5.39.0/node_modules/vite/dist/node/chunks/dep-B0fRCRkQ.js:14969:20)
file: ./iframe.html?html-proxy&inline-css&index=0.css
? Would you like to help improve Storybook by sending anonymous crash reports? › (Y/n)info => Copying static files: public at storybook-static
✖ Would you like to help improve Storybook by sending anonymous crash reports? … yes
ELIFECYCLE Command failed with exit code 1.
原因と試してみたこと
ビルドのログなどから postcss.config.mjs が原因だということが分かりました。
実際、postcss.config.mjs を削除すると Storybook は正常に動作するようになります。
しかし、これでは肝心の本体アプリにスタイルが適用されません。
1. Storybook のアドオン設定の更新
まず最初に、@storybook/addon-postcssの設定を見直しました。
公式ドキュメントのPostCSS 8 向けの設定に従って、.storybook/main.tsを修正してみましたが、問題は解決しませんでした。
.storybook/main.ts
const config = {
// ...
addons: [
// ...
+ {
+ name: "@storybook/addon-postcss",
+ options: {
+ postcssLoaderOptions: {
+ implementation: require("postcss"),
+ },
+ },
+ },
],
};
2. postcss.config の拡張子変更
次に、下記の記事を参考に、postcss.config.mjsの拡張子を.jsに変更してみましたが、こちらも今回は効果がありませんでした。
3. CommonJS 形式へのエクスポート変更
また、下記の記事を参考に、postcss.config.mjsを CommonJS 形式のエクスポートに変更してみましたが、こちらも今回は効果がありませんでした。
解決策
以下のように postcss.config.mjs の plugins を配列からオブジェクトに書き換えたところビルドエラーが解消しました。
const config = {
- plugins: ["@tailwindcss/postcss"],
+ plugins: {
+ "@tailwindcss/postcss": {},
+ },
};
export default config;
起動してみても正常に動作するようになりました。
よくよく調べてみると、私がハマった 1,2 日前に Issue も上がってたようです
おわりに
Discussions はよく確認するんですが Issues もちゃんと確認しないとダメですね...
どなたかの参考になれば幸いです。
Discussion