[Bug]: init fails in React+Vite+npm because of conflicting versions of eslint

[JReinhold]

Describe the bug

When initting Storybook in a fresh Vite+React project with npm, it ends with this from npm, and never continues:

Installing dependencies...

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @typescript-eslint/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/eslint
npm WARN   dev eslint@"^9.9.0" from the root project
npm WARN   7 more (@eslint-community/eslint-utils, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm WARN node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN   @typescript-eslint/utils@"^5.62.0" from [email protected]
npm WARN   node_modules/eslint-plugin-storybook
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/eslint
npm WARN   peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/[email protected]
npm WARN   node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN     @typescript-eslint/utils@"^5.62.0" from [email protected]
npm WARN     node_modules/eslint-plugin-storybook

Indicating that the init failed, but it's "just" npm that never installs any dependencies.

To summarize:

• eslint-plugin-storybook -> @typescript-eslint/utils@"^5.62.0 -> peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0"
• Found [email protected] in project

I'd expect this to be a problem in any project that uses eslint v9, not just Vite+React.

Reproduction link

see steps below

Reproduction steps

1. npm create vite test-sb-init -- --template react-ts
2. cd test-sb-init
3. npm install
4. npx storybook@latest init

System

Storybook Environment Info:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/Library/Caches/fnm_multishells/24822_1727296934751/bin/node
    Yarn: 1.22.19 - ~/Library/Caches/fnm_multishells/24822_1727296934751/bin/yarn
    npm: 10.5.0 - ~/Library/Caches/fnm_multishells/24822_1727296934751/bin/npm <----- active
    pnpm: 9.6.0 - ~/Library/Caches/fnm_multishells/24822_1727296934751/bin/pnpm
  Browsers:
    Chrome: 129.0.6668.59
    Edge: 129.0.2792.52
    Safari: 16.2
  npmPackages:
    @storybook/addon-essentials: ^8.3.1 => 8.3.1
    @storybook/addon-interactions: ^8.3.1 => 8.3.1
    @storybook/addon-links: ^8.3.1 => 8.3.1
    @storybook/addon-onboarding: ^8.3.1 => 8.3.1
    @storybook/blocks: ^8.3.1 => 8.3.1
    @storybook/react: ^8.3.1 => 8.3.1
    @storybook/react-vite: ^8.3.1 => 8.3.1
    @storybook/test: ^8.3.1 => 8.3.1
    eslint-plugin-storybook: ^0.8.0 => 0.8.0
    storybook: ^8.3.1 => 8.3.1

Additional context

No response

[Mathias-S]

The root cause of this issue is that eslint-plugin-storybook doesn't actually support ESLint v9, only ESLint v8 which is EOL beginning next week (!).

There is an old PR to support ESLint v9, but there's been no updates in a while: storybookjs/eslint-plugin-storybook#156

Also, when installing npx storybook@latest init, the script looks for .eslintrc, the legacy config format. While still supported in ESLint v9, this config format is deprecated and will be removed in ESLint v10. So this also needs to be fixed.

[kasperpeulen]

We merged this PR now!
storybookjs/eslint-plugin-storybook#171