Storybook: Postcss structure conflicts with next.js

[guy-kdm]

Describe the bug
In postcss.config.js storybook expects plugins to be surrounded with a require() call:
postcss.config.js
module.exports = { plugins: [require("tailwindcss")], }

Otherwise it fails with
TypeError: Invalid PostCSS Plugin found at: plugins[0]

Next.js however mandates plugins to be strings. Otherwise it fails with:
Error: A PostCSS Plugin was passed as a function using require(), but it must be provided as a string. Read more: https://err.sh/next.js/postcss-shape

To Reproduce
Steps to reproduce the behavior:

1. create a next.js app with a postcss.config.js file referring to plugins
2. next start and start-storybook now conflict

Expected behavior
It should wrap string in require calls by default.

[imranhsayed]

I am facing the exact same issue for a clients project.
It will be helpful if its resolved quickly 🙏

[hulufei]

The answer is in next.js official doc:

Note: If your postcss.config.js needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead

https://nextjs.org/docs/advanced-features/customizing-postcss-config#customizing-plugins

[imranhsayed]

Thank you fro a quick suggestion. It works 👍

[imranhsayed]

@hulufei

[guy-kdm]

Should probably just be solved with a tweaked error msg in Next.js. Thanks @hulufei !