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

JReinhold commented 1 month ago

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/utils@5.62.0
npm WARN Found: eslint@9.11.1
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/utils@5.62.0
npm WARN node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN   @typescript-eslint/utils@"^5.62.0" from eslint-plugin-storybook@0.8.0
npm WARN   node_modules/eslint-plugin-storybook
npm WARN
npm WARN Conflicting peer dependency: eslint@8.57.1
npm WARN node_modules/eslint
npm WARN   peer eslint@"^6.0.0 || ^7.0.0 || ^8.0.0" from @typescript-eslint/utils@5.62.0
npm WARN   node_modules/eslint-plugin-storybook/node_modules/@typescript-eslint/utils
npm WARN     @typescript-eslint/utils@"^5.62.0" from eslint-plugin-storybook@0.8.0
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 eslint@9.11.1 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

npm create vite test-sb-init -- --template react-ts
cd test-sb-init
npm install
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 commented 1 month ago

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: https://github.com/storybookjs/eslint-plugin-storybook/pull/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 commented 3 weeks ago

We merged this PR now! https://github.com/storybookjs/eslint-plugin-storybook/pull/171

storybookjs / storybook