[Bug]: Storybook plugin not added to eslint.config during init in Next.js projects

[valentinpalkovic]

Describe the bug

When initializing Storybook in a Next.js project, the setup modifies the eslint.config file to include an import for the Storybook ESLint plugin, but does not actually register the plugin in the ESLint configuration array.

Current generated eslint.config:

// 👇 only the import is added, but the plugin isn't added to the config
import storybook from "eslint-plugin-storybook";

import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

Expected behaviour
Storybook’s init process should both:

• Add the eslint-plugin-storybook import and
• Extend the ESLint configuration with the Storybook plugin, e.g.:

Reproduction steps

1. Create a new Next.js project (npx gitpick storybookjs/sandboxes/tree/next/nextjs-vite/default-ts/before-storybook)
2. Run npx storybook@latest init
3. Inspect the generated eslint.config.mjs (or eslint.config.mjs)

System

-

Additional context

No response

[dosubot]

This is a known limitation in Storybook's automation: when your ESLint config uses a variable (like const eslintConfig = defineConfig([...]) and export default eslintConfig;), the init process adds the import for eslint-plugin-storybook but can't reliably mutate the config array, so it doesn't register the plugin automatically. This isn't specific to Next.js—it's a limitation with certain flat config patterns in general.

To fix this, manually register the plugin by spreading the recommended config into your array. For your setup, update your config like this:

import storybook from "eslint-plugin-storybook";
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  ...storybook.configs["flat/recommended"], // 👈 Add this line
  globalIgnores([
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

The import alone isn't enough; the plugin must be registered in the config array to be active. This is the approach recommended in the official docs.

If you use TypeScript and see type errors with the default import, try import { configs } from "eslint-plugin-storybook" and use ...configs["flat/recommended"] instead.

No recent Storybook releases or merged PRs address this specific automation gap, so manual configuration is currently required for these cases.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}