<storybook> init できない

バージョン
next.js v13.5
prettier v3.0
prettier-plugin-tailwindcss v0.54
pnpm v8.8

これは何?

Next.jsプロジェクトにstorybookをinitしようとした時に遭遇したエラーの解決法。

$ pnpm dlx storybook@latest init
 ...
 storybook init - the simplest way to add a Storybook to your project.

 • Detecting project type. ✓
 • Preparing to install dependencies. ✓
 • Installing dependenciesLockfile is up to date, resolution step is skipped
Already up to date
Done in 526ms

# viteを選択
We were not able to detect the right builder for your project. Please select one: › Vite

✔ Getting the correct version of 9 packages
✔ We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: https://github.com/storybookjs/eslint-plugin-storybook#readme

Would you like to install it? … yes
Configuring Storybook ESLint plugin at .eslintrc.json
✔ Installing Storybook dependencies

こんなエラーが出てくる

Error [ERR_REQUIRE_ESM]: require() of ES Module /.../node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.4_prettier@3.0.3/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
Instead change the require of /.../node_modules/.pnpm/prettier-plugin-tailwindcss@0.5.4_prettier@3.0.3/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.
    at /.../pnpm/store/v3/tmp/dlx-8119/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:38143:10
    at Array.map (<anonymous>)
    at Object.load (/.../pnpm/store/v3/tmp/dlx-8119/node_modules/.pnpm/prettier@2.8.8/node_modules/prettier/index.js:38141:128)

結論

prettier3との互換性がないらしく、prettierをダウングレードすれば良い。

$ pnpm install -D prettier@2.8 prettier-plugin-tailwindcss@0.4

参考