v9.0.4 broken - ConfigError: Config (unnamed): Unexpected key "0" found

[KieranP]

After adding this plugin (v9.0.4) using README instructions, linting breaks. Removing plugin, linting works again.

› yarn lint

Oops! Something went wrong! :(

ESLint: 9.28.0

ConfigError: Config (unnamed): Unexpected key "0" found.
    at rethrowConfigError (node_modules/@eslint/config-array/dist/cjs/index.cjs:328:8)
    at node_modules/@eslint/config-array/dist/cjs/index.cjs:1259:5
    at Array.reduce (<anonymous>)
    at FlatConfigArray.getConfigWithStatus (node_modules/@eslint/config-array/dist/cjs/index.cjs:1252:43)
    at FlatConfigArray.getConfig (node_modules/@eslint/config-array/dist/cjs/index.cjs:1281:15)
    at entryFilter (node_modules/eslint/lib/eslint/eslint-helpers.js:290:27)
    at async NodeHfs.<anonymous> (file://node_modules/@humanfs/core/src/hfs.js:574:24)
    at async NodeHfs.<anonymous> (file://node_modules/@humanfs/core/src/hfs.js:604:6)
    at async NodeHfs.<anonymous> (file://node_modules/@humanfs/core/src/hfs.js:604:6)
    at async NodeHfs.walk (file://node_modules/@humanfs/core/src/hfs.js:614:3)

› npx storybook@latest info

Storybook Environment Info:

  System:
    OS: macOS 15.5
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.15.1 - ~/.asdf/installs/nodejs/22.15.1/bin/node
    Yarn: 4.9.1 - /opt/homebrew/bin/yarn <----- active
    npm: 10.9.2 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Chrome: 137.0.7151.56
    Safari: 18.5
  npmPackages:
    @storybook/addon-themes: ^9.0.4 => 9.0.4 
    @storybook/svelte-vite: ^9.0.4 => 9.0.4 
    eslint-plugin-storybook: ^9.0.4 => 9.0.4 
    storybook: ^9.0.4 => 9.0.4 

[yannbf]

@KieranP @adbutterfield can you please share how your eslint file looks like? Both in content but also in file name. Thanks!

[KieranP]

@yannbf Here is my eslint.config.js

import eslint from '@eslint/js'
import eslintTS from 'typescript-eslint'
import eslintJson from '@eslint/json'
import eslintImports from 'eslint-plugin-simple-import-sort'
import eslintCompat from 'eslint-plugin-compat'
import eslintPrettier from 'eslint-config-prettier'
import eslintSvelte from 'eslint-plugin-svelte'
import svelteParser from 'svelte-eslint-parser'
import eslintPlaywright from 'eslint-plugin-playwright'

import svelteConfig from './svelte.config.js'
import globals from 'globals'

export default eslintTS.config(
  {
    plugins: {
      'simple-import-sort': eslintImports,
      json: eslintJson,
    },
  },

  // Enable Linting Rules
  ...[
    {
      ...eslint.configs.recommended,
      files: ['**/*.{js,ts,svelte}'],
    },

    ...eslintTS.configs.strictTypeChecked.map((config) => ({
      ...config,
      files: ['**/*.{js,ts,svelte}'],
    })),

    ...eslintTS.configs.stylisticTypeChecked.map((config) => ({
      ...config,
      files: ['**/*.{js,ts,svelte}'],
    })),

    ...eslintSvelte.configs.base,

    ...eslintSvelte.configs.recommended.map((config) => ({
      ...config,
      files: ['**/*.svelte'],
    })),

    {
      ...eslintCompat.configs['flat/recommended'],
      files: ['**/*.{js,ts,svelte}'],
      settings: {
        polyfills: [
          'AbortController',
          'Array.prototype.flatMap',
          'Object.prototype.fromEntries',
          'ResizeObserver',
          'String.prototype.replaceAll',
          'structuredClone',
          'URLSearchParams',
        ],
      },
    },

    {
      ...eslintPlaywright.configs['flat/recommended'],
      files: ['playwright/**/*.{js,ts}'],
    },

    {
      ...eslintJson.configs.recommended,
      language: 'json/json5',
      files: ['**/*.json'],
    },
  ],

  // Prettier Compatability
  ...[
    {
      ...eslintPrettier,
      files: ['**/*.{js,ts,svelte}'],
    },

    ...eslintSvelte.configs.prettier.map((config) => ({
      ...config,
      files: ['**/*.svelte'],
    })),
  ],

  //
  // Enabled/Disabled Rules
  //

  {
    files: ['**/*.{js,ts,svelte}'],
    rules: {
      // Enable ESLint Rules
      'array-callback-return': 'error',
      'block-scoped-var': 'error',
      // 'default-case': 'error',
      'default-case-last': 'error',
      eqeqeq: 'error',
      'logical-assignment-operators': 'error',
      'no-await-in-loop': 'error',
      'no-constructor-return': 'error',
      'no-duplicate-imports': 'error',
      'no-eq-null': 'error',
      'no-eval': 'error',
      'no-implicit-coercion': 'error',
      'no-inner-declarations': 'error',
      'no-lonely-if': 'error',
      'no-negated-condition': 'error',
      'no-nested-ternary': 'error',
      'no-new': 'error',
      'no-new-func': 'error',
      // 'no-param-reassign': 'error',
      'no-promise-executor-return': 'error',
      'no-return-assign': 'error',
      'no-script-url': 'error',
      'no-self-compare': 'error',
      'no-template-curly-in-string': 'error',
      'no-throw-literal': 'error',
      'no-unassigned-vars': 'error',
      // 'no-undefined': 'error',
      'no-unmodified-loop-condition': 'error',
      'no-unneeded-ternary': 'error',
      'no-unreachable-loop': 'error',
      // 'no-useless-assignment': 'error', // Not Svelte5 compatible
      'no-useless-call': 'error',
      'no-useless-computed-key': 'error',
      'no-useless-concat': 'error',
      'no-useless-rename': 'error',
      'no-useless-return': 'error',
      'no-var': 'error',
      'object-shorthand': 'error',
      'prefer-arrow-callback': 'error',
      'prefer-const': 'error',
      'prefer-object-has-own': 'error',
      'prefer-object-spread': 'error',
      'prefer-rest-params': 'error',
      'prefer-spread': 'error',
      'prefer-template': 'error',
      // 'require-atomic-updates': 'error',

      // Disable ESLint Rules (TS/Svelte versions below)
      'class-methods-use-this': 'off',
      'consistent-return': 'off',
      'default-param-last': 'off',
      'no-dupe-class-members': 'off',
      'no-invalid-this': 'off',
      'no-loop-func': 'off',
      'no-redeclare': 'off',
      'no-restricted-imports': 'off',
      'no-shadow': 'off',
      'no-use-before-define': 'off',

      // Enable TSLint Rules
      '@typescript-eslint/class-methods-use-this': 'error',
      '@typescript-eslint/consistent-return': 'error',
      '@typescript-eslint/consistent-type-exports': 'error',
      '@typescript-eslint/consistent-type-imports': 'error',
      '@typescript-eslint/default-param-last': 'error',
      // '@typescript-eslint/explicit-function-return-type': 'error',
      '@typescript-eslint/explicit-member-accessibility': 'error',
      // '@typescript-eslint/explicit-module-boundary-types': 'error',
      '@typescript-eslint/member-ordering': 'error',
      '@typescript-eslint/method-signature-style': 'error',
      '@typescript-eslint/no-dupe-class-members': 'error',
      '@typescript-eslint/no-import-type-side-effects': 'error',
      '@typescript-eslint/no-invalid-this': 'error',
      '@typescript-eslint/no-loop-func': 'error',
      '@typescript-eslint/no-redeclare': 'error',
      '@typescript-eslint/no-restricted-imports': [
        'error',
        {
          patterns: ['~/*', '@/*'],
        },
      ],
      // '@typescript-eslint/no-shadow': 'error',
      '@typescript-eslint/no-unnecessary-parameter-property-assignment':
        'error',
      '@typescript-eslint/no-unnecessary-qualifier': 'error',
      '@typescript-eslint/no-unnecessary-type-conversion': 'error',
      // '@typescript-eslint/no-use-before-define': 'error',
      '@typescript-eslint/no-useless-empty-export': 'error',
      '@typescript-eslint/prefer-enum-initializers': 'error',
      // '@typescript-eslint/prefer-readonly-parameter-types': 'error',
      '@typescript-eslint/promise-function-async': 'error',
      '@typescript-eslint/require-array-sort-compare': 'error',
      '@typescript-eslint/strict-boolean-expressions': 'error',
      '@typescript-eslint/switch-exhaustiveness-check': [
        'error',
        {
          considerDefaultExhaustiveForUnions: true,
          requireDefaultForNonUnion: true,
        },
      ],

      // Override TSLint Rules
      '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
      '@typescript-eslint/no-unused-vars': [
        'error',
        {
          args: 'all',
          argsIgnorePattern: '^_',
          caughtErrors: 'all',
          caughtErrorsIgnorePattern: '^_',
          destructuredArrayIgnorePattern: '^_',
          varsIgnorePattern: '^_',
          ignoreRestSiblings: true,
        },
      ],
      '@typescript-eslint/restrict-template-expressions': [
        'error',
        {
          allowNumber: true,
        },
      ],

      // Disable TSLint Rules (for now)
      '@typescript-eslint/no-unnecessary-condition': 'off',
      '@typescript-eslint/no-unsafe-argument': 'off',
      '@typescript-eslint/no-unsafe-assignment': 'off',
      '@typescript-eslint/no-unsafe-call': 'off',
      '@typescript-eslint/no-unsafe-member-access': 'off',
      '@typescript-eslint/no-unsafe-return': 'off',
      '@typescript-eslint/prefer-nullish-coalescing': 'off',
      '@typescript-eslint/strict-boolean-expressions': 'off',

      // Import Sort Rules
      'simple-import-sort/imports': [
        'error',
        {
          groups: [
            ['^\\u0000.*'],
            ['^svelte($|/)'],
            ['^[a-z]'],
            ['^@views/'],
            ['^@components/'],
            ['^@libs/'],
            ['^@helpers/'],
            ['^@styles/'],
            ['^@images/'],
            ['^@fonts/'],
            ['^@playwright/'],
            ['^@support/'],
            ['^@factories'],
            ['^@tests/'],
            ['^\\.'],
            ['^'],
            ['.*\\u0000$'],
          ],
        },
      ],
    },
  },

  {
    files: ['**/*.svelte'],
    rules: {
      'prefer-const': 'off',
      'svelte/block-lang': [
        'error',
        {
          script: 'ts',
          style: 'scss',
        },
      ],
      'svelte/button-has-type': 'error',
      // 'svelte/no-inline-styles': 'error', // Will be needed for stricter CSP
      'svelte/no-target-blank': 'error',
      'svelte/prefer-class-directive': 'error',
      'svelte/prefer-const': 'error',
      'svelte/prefer-style-directive': 'error',
      'svelte/shorthand-attribute': 'error',
      'svelte/shorthand-directive': 'error',
      'svelte/sort-attributes': 'error',
    },
  },

  {
    files: ['playwright/**/*.{js,ts}'],
    rules: {
      'playwright/prefer-comparison-matcher': 'error',
      'playwright/prefer-equality-matcher': 'error',
      'playwright/prefer-hooks-in-order': 'error',
      'playwright/prefer-hooks-on-top': 'error',
      'playwright/prefer-lowercase-title': 'error',
      'playwright/prefer-native-locators': 'error',
      'playwright/prefer-locator': 'error',
      'playwright/prefer-strict-equal': 'error',
      'playwright/prefer-to-be': 'error',
      'playwright/prefer-to-contain': 'error',
      'playwright/prefer-to-have-count': 'error',
      'playwright/prefer-to-have-length': 'error',
      'playwright/require-to-throw-message': 'error',
      'playwright/require-top-level-describe': 'error',
    },
  },

  //
  // Other Tweaks
  //

  {
    files: ['**/*.{js,ts,svelte}'],
    languageOptions: {
      parserOptions: {
        projectService: true,
        parser: eslintTS.parser,
        extraFileExtensions: ['.svelte'],
      },
      globals: {
        ...globals.browser,
      },
    },
  },

  {
    files: ['**/*.svelte'],
    languageOptions: {
      parser: svelteParser,
      parserOptions: {
        svelteConfig,
      },
    },
  }
)

[binarykitchen]

Me too, having the same issue.

[sorioinc]

It was happening to me as well, but I found that 'flat/recommended' returns an array, not an object:

[
  {
    name: 'storybook:recommended:setup',
    plugins: { storybook: [Getter] }
  },
  {
    name: 'storybook:recommended:stories-rules',
    files: [
      '**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)',
      '**/*.story.@(ts|tsx|js|jsx|mjs|cjs)'
    ],
    rules: {
      'react-hooks/rules-of-hooks': 'off',
      'import/no-anonymous-default-export': 'off',
      'storybook/await-interactions': 'error',
      'storybook/context-in-play-function': 'error',
      'storybook/default-exports': 'error',
      'storybook/hierarchy-separator': 'warn',
      'storybook/no-redundant-story-name': 'warn',
      'storybook/no-renderer-packages': 'error',
      'storybook/prefer-pascal-case': 'warn',
      'storybook/story-exports': 'error',
      'storybook/use-storybook-expect': 'error',
      'storybook/use-storybook-testing-library': 'error'
    }
  },
  {
    name: 'storybook:recommended:main-rules',
    files: [ '.storybook/main.@(js|cjs|mjs|ts)' ],
    rules: { 'storybook/no-uninstalled-addons': 'error' }
  }
]

so you have to added as a root level config just like the example in the docs page, and then I could turn off/on other rules that are relevant to me for storybook

import storybook from 'eslint-plugin-storybook';

export default [
  // ...

  ...storybook.configs['flat/recommended'],
  {
    // 👇 This should match the `stories` property in .storybook/main.js|ts
    files: ['**/*.stories.@(ts|tsx|js|jsx|mjs|cjs)'],
    rules: {
      // 👇 Enable this rule
      'storybook/csf-component': 'error',
      // 👇 Disable this rule
      'storybook/default-exports': 'off',
    },
  },

  // ...
];

[binarykitchen]

Well, thanks, although it still errors when you use typescript-eslint

export default tseslint.config(
  ...storybook.configs["flat/recommended"], // <-- error
```

Errors with

```
Argument of type '{ name: string; plugins: { readonly storybook: any; }; files?: undefined; rules?: undefined; } | { name: string; files: string[]; rules: { readonly 'react-hooks/rules-of-hooks': "off"; readonly 'import/no-anonymous-default-export': "off"; ... 10 more ...; readonly 'storybook/no-uninstalled-addons'?: undefined; }; pl...' is not assignable to parameter of type 'InfiniteDepthConfigWithExtends'.
  Type '{ name: string; plugins: { readonly storybook: any; }; files?: undefined; rules?: undefined; }' is not assignable to type 'InfiniteDepthConfigWithExtends'.
    Type '{ name: string; plugins: { readonly storybook: any; }; files?: undefined; rules?: undefined; }' is not assignable to type 'ConfigWithExtends' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
      Types of property 'files' are incompatible.
        Type 'undefined' is not assignable to type '(string | string[])[]'.
```