nextjs - 💡(How to fix) Fix [Bug] SB_FRAMEWORK_NEXTJS_0003: PostCSS array format incompatible with Vite-based Storybook [2 comments, 3 participants]

nextjs2025-09-13 15:41:54

ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#83760•Fetched 2026-04-08 02:21:39

View on GitHub

Comments

Participants

Timeline

Reactions

Author

Participants

Timeline (top)

commented ×2issue_type_added ×1labeled ×1

Error Message

=> Failed to build the preview SB_FRAMEWORK_NEXTJS_0003 (IncompatiblePostCssConfigError): Incompatible PostCSS configuration format detected.

Next.js uses an array-based format for plugins which is not compatible with Vite:

// ❌ Incompatible format (used by Next.js) const config = { plugins: ["@tailwindcss/postcss"], };

Please transform your PostCSS config to use the object-based format, which is compatible with Next.js and Vite:

// ✅ Compatible format (works with Next.js and Vite) const config = { plugins: { "@tailwindcss/postcss": {}, }, };

Original error: Invalid PostCSS Plugin found at: plugins[0]

(@./postcss.config.mjs) at Object.viteFinal (./node_modules/.pnpm/@[email protected]_@[email protected]_next@15.5.3_@[email protected]_react-do_faecb587e34464b06e33be62513cae6f/node_modules/@storybook/nextjs-vite/dist/preset.js:597:2802) at async createViteServer (./node_modules/.pnpm/@[email protected]_storybook@9.1.5_@[email protected]_vite@7.1.5_@t_0f603e0e4deb42a101fb54f35b1ebae9/node_modules/@storybook/builder-vite/dist/index.js:92:25) at async Module.start (./node_modules/.pnpm/@[email protected]_storybook@9.1.5_@[email protected]_vite@7.1.5_@t_0f603e0e4deb42a101fb54f35b1ebae9/node_modules/@storybook/builder-vite/dist/index.js:92:658) at async storybookDevServer (./node_modules/.pnpm/[email protected]_@[email protected]_vite@7.1.5_@[email protected]_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:42917:79) at async buildOrThrow (./node_modules/.pnpm/[email protected]_@[email protected]_vite@7.1.5_@[email protected]_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:39285:12) at async buildDevStandalone (./node_modules/.pnpm/[email protected]_@[email protected]_vite@7.1.5_@[email protected]_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:44170:78) at async withTelemetry (./node_modules/.pnpm/[email protected]_@[email protected]_vite@7.1.5_@[email protected]_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:42279:12) at async dev (./node_modules/.pnpm/[email protected]_@[email protected]_vite@7.1.5_@[email protected]_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/cli/bin/index.cjs:5905:3) at async r.<anonymous> (./node_modules/.pnpm/[email protected]_@[email protected]_vite@7.1.5_@[email protected]_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/cli/bin/index.cjs:6015:74)

Broken build, fix the error above.

Code Example

pnpm create next-app@latest my-app --yes

pnpm create storybook@latest

---

=> Failed to build the preview
SB_FRAMEWORK_NEXTJS_0003 (IncompatiblePostCssConfigError): Incompatible PostCSS configuration format detected.

Next.js uses an array-based format for plugins which is not compatible with Vite:

// ❌ Incompatible format (used by Next.js)
const config = {
  plugins: ["@tailwindcss/postcss"],
};

Please transform your PostCSS config to use the object-based format, which is compatible with Next.js and Vite:

// ✅ Compatible format (works with Next.js and Vite)
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Original error: Invalid PostCSS Plugin found at: plugins[0]

(@./postcss.config.mjs)
    at Object.viteFinal (./node_modules/.pnpm/@storybook+nextjs-vite@9.1.5_@babel+core@7.28.4_next@15.5.3_@babel+core@7.28.4_react-do_faecb587e34464b06e33be62513cae6f/node_modules/@storybook/nextjs-vite/dist/preset.js:597:2802)
    at async createViteServer (./node_modules/.pnpm/@storybook+builder-vite@9.1.5_storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@t_0f603e0e4deb42a101fb54f35b1ebae9/node_modules/@storybook/builder-vite/dist/index.js:92:25)
    at async Module.start (./node_modules/.pnpm/@storybook+builder-vite@9.1.5_storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@t_0f603e0e4deb42a101fb54f35b1ebae9/node_modules/@storybook/builder-vite/dist/index.js:92:658)
    at async storybookDevServer (./node_modules/.pnpm/storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@types+node@20.19.14_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:42917:79)
    at async buildOrThrow (./node_modules/.pnpm/storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@types+node@20.19.14_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:39285:12)
    at async buildDevStandalone (./node_modules/.pnpm/storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@types+node@20.19.14_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:44170:78)
    at async withTelemetry (./node_modules/.pnpm/storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@types+node@20.19.14_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:42279:12)
    at async dev (./node_modules/.pnpm/storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@types+node@20.19.14_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/cli/bin/index.cjs:5905:3)
    at async r.<anonymous> (./node_modules/.pnpm/storybook@9.1.5_@testing-library+dom@10.4.1_vite@7.1.5_@types+node@20.19.14_jiti@2.5.1__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/cli/bin/index.cjs:6015:74)

Broken build, fix the error above.

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:51 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 22.15.1
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 10.15.0
Relevant Packages:
  next: 15.5.3 // Latest available version is detected (15.5.3).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.9.2
Next.js Config:
  output: N/A

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/sonsulee/next15.5-storybook9.15-integration-bug

To Reproduce

pnpm create next-app@latest my-app --yes

pnpm create storybook@latest

After installing the Next.js project, including Tailwind, proceed to install Storybook.

After cloning a reproducible repository and installing the package (with Storybook already installed), running the pnpm run storybook script produces the same error.

Current vs. Expected behavior

Current behavior: When installing Storybook with PostCSS already installed, the following error occurs.

=> Failed to build the preview
SB_FRAMEWORK_NEXTJS_0003 (IncompatiblePostCssConfigError): Incompatible PostCSS configuration format detected.

Next.js uses an array-based format for plugins which is not compatible with Vite:

// ❌ Incompatible format (used by Next.js)
const config = {
  plugins: ["@tailwindcss/postcss"],
};

Please transform your PostCSS config to use the object-based format, which is compatible with Next.js and Vite:

// ✅ Compatible format (works with Next.js and Vite)
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

Original error: Invalid PostCSS Plugin found at: plugins[0]

(@./postcss.config.mjs)
    at Object.viteFinal (./node_modules/.pnpm/@[email protected]_@[email protected][email protected]_@[email protected]_react-do_faecb587e34464b06e33be62513cae6f/node_modules/@storybook/nextjs-vite/dist/preset.js:597:2802)
    at async createViteServer (./node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected]_@t_0f603e0e4deb42a101fb54f35b1ebae9/node_modules/@storybook/builder-vite/dist/index.js:92:25)
    at async Module.start (./node_modules/.pnpm/@[email protected][email protected]_@[email protected][email protected]_@t_0f603e0e4deb42a101fb54f35b1ebae9/node_modules/@storybook/builder-vite/dist/index.js:92:658)
    at async storybookDevServer (./node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected]__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:42917:79)
    at async buildOrThrow (./node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected]__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:39285:12)
    at async buildDevStandalone (./node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected]__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:44170:78)
    at async withTelemetry (./node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected]__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/core-server/index.cjs:42279:12)
    at async dev (./node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected]__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/cli/bin/index.cjs:5905:3)
    at async r.<anonymous> (./node_modules/.pnpm/[email protected]_@[email protected][email protected]_@[email protected][email protected]__eb9d354f58b6eb02de7e145d437d8f2e/node_modules/storybook/dist/cli/bin/index.cjs:6015:74)

Broken build, fix the error above.

Expected behavior: There should be no compatibility issues when installing the storybook.

I believe changing the plugin application method from an array to an object will cause it to function correctly.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:51 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 22.15.1
  npm: 10.9.2
  Yarn: 1.22.22
  pnpm: 10.15.0
Relevant Packages:
  next: 15.5.3 // Latest available version is detected (15.5.3).
  eslint-config-next: N/A
  react: 19.1.0
  react-dom: 19.1.0
  typescript: 5.9.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

create-next-app

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

This issue had previously been resolved via issue #77376.

However, it appears that the work done during the process of addressing issue #75407 has been reverted.

extent analysis

TL;DR

Update the PostCSS configuration to use an object-based format for plugins to resolve the compatibility issue with Next.js and Vite.

Guidance

Identify the PostCSS configuration file: Locate the postcss.config.mjs file in your project directory.
Update the plugin format: Change the plugin application method from an array to an object, as suggested in the error message. For example, update const config = { plugins: ["@tailwindcss/postcss"], }; to const config = { plugins: { "@tailwindcss/postcss": {}, }, };.
Verify the fix: Run pnpm run storybook again to check if the error is resolved.

Example

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

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

Notes

This issue seems to be a regression of a previously resolved issue (#77376), and the fix involves updating the PostCSS configuration to be compatible with Next.js and Vite.

Recommendation

Apply the workaround by updating the PostCSS configuration to use an object-based format for plugins, as this should resolve the compatibility issue with Next.js and Vite.

Vote matrix · Quick signals

Works

Did the solution work? Tap to confirm.

Easy Fix

Was it a quick fix?

Time Saver

Did it save you time?

Blocking

Was it severely blocking?

Common Issue

Are others likely hitting this too?

Flaky / Intermittent

Is it intermittent?

Verified / Reproducible

Can you reproduce it reliably?

#indexing error #inference speed #output truncation #response parsing #generation error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - 💡(How to fix) Fix [Bug] SB_FRAMEWORK_NEXTJS_0003: PostCSS array format incompatible with Vite-based Storybook [2 comments, 3 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

TRENDING

nextjs - 💡(How to fix) Fix [Bug] SB_FRAMEWORK_NEXTJS_0003: PostCSS array format incompatible with Vite-based Storybook [2 comments, 3 participants]

Recommended Tools

GitHub issue graph ai analysis

Error Message

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

Which area(s) are affected? (Select all that apply)

Which stage(s) are affected? (Select all that apply)

Additional context

extent analysis

TL;DR

Guidance

Example

Notes

Recommendation

Still need to ship something?

RELATED_DISCOVERY

TRENDING