[Bug] Dependency resolution failure when installing against latest Sveltekit/Storybook

[unikitty37]

Describe the bug

When using version 3.54.0 of Svelte, installed by Sveltekit, and version 7.0.0-beta.6 of Storybook, installation fails with a dependency error.

It appears to be complaining that @storybook/svelte@^7.0.0-beta.6 is not greater than or equal to 6.4.20, which is not how I remember numbers working 😁

Steps to reproduce the behaviour

1. npm create svelte@latest frontend (choose Skeleton Project, no TypeScript or Prettier, yes to all other options)
2. cd frontend; npm install
3. npx sb@next init (answer yes to all prompts)
4. npm run storybook (just to check it works at this point; hit ⌃C to stop it once verified)
5. Add "@storybook/addon-svelte-csf": "^3.0.0-next.1 to package.json
6. npm install
7. npm fails to resolve dependencies (see npm resolution error report below)

Expected behaviour

The install is successful and, after making the documented changes to .storybook/main.cjs, I can go on to write stories in Svelte syntax.

Screenshots and/or logs

# npm resolution error report

2022-12-14T13:43:33.827Z

While resolving: [email protected]
Found: @storybook/[email protected]
node_modules/@storybook/svelte
  dev @storybook/svelte@"^7.0.0-beta.6" from the root project

Could not resolve dependency:
peer @storybook/svelte@">=6.4.20" from @storybook/[email protected]
node_modules/@storybook/addon-svelte-csf
  dev @storybook/addon-svelte-csf@"^3.0.0-next.1" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@storybook/svelte",
    "version": "7.0.0-beta.6",
    "whileInstalling": {
      "name": "frontend",
      "version": "0.0.1",
      "path": "/Users/me/Desktop/frontend"
    },
    "location": "node_modules/@storybook/svelte",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "dev",
        "name": "@storybook/svelte",
        "spec": "^7.0.0-beta.6",
        "from": {
          "location": "/Users/me/Desktop/frontend"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "dev",
    "name": "@storybook/svelte",
    "spec": "^7.0.0-beta.6",
    "from": {
      "location": "/Users/me/Desktop/frontend"
    }
  },
  "edge": {
    "type": "peer",
    "name": "@storybook/svelte",
    "spec": ">=6.4.20",
    "error": "INVALID",
    "from": {
      "name": "@storybook/addon-svelte-csf",
      "version": "3.0.0-next.1",
      "whileInstalling": {
        "name": "frontend",
        "version": "0.0.1",
        "path": "/Users/me/Desktop/frontend"
      },
      "location": "node_modules/@storybook/addon-svelte-csf",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "dev",
          "name": "@storybook/addon-svelte-csf",
          "spec": "^3.0.0-next.1",
          "from": {
            "location": "/Users/me/Desktop/frontend"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

package.json:

{
  "name": "frontend",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "vite dev",
    "build": "vite build",
    "preview": "vite preview",
    "test": "playwright test",
    "test:unit": "vitest",
    "lint": "eslint .",
    "storybook": "storybook dev -p 6006 --no-open",
    "build-storybook": "storybook build"
  },
  "devDependencies": {
    "@playwright/test": "^1.28.1",
    "@storybook/addon-essentials": "^7.0.0-beta.6",
    "@storybook/addon-interactions": "^7.0.0-beta.6",
    "@storybook/addon-links": "^7.0.0-beta.6",
    "@storybook/addon-svelte-csf": "^3.0.0-next.1",
    "@storybook/blocks": "^7.0.0-beta.6",
    "@storybook/svelte": "^7.0.0-beta.6",
    "@storybook/sveltekit": "^7.0.0-beta.6",
    "@storybook/testing-library": "^0.0.13",
    "@sveltejs/adapter-auto": "^1.0.0-next.90",
    "@sveltejs/kit": "^1.0.0-next.587",
    "eslint": "^8.28.0",
    "eslint-plugin-storybook": "^0.6.8",
    "eslint-plugin-svelte3": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "^7.0.0-beta.6",
    "svelte": "^3.54.0",
    "vite": "^4.0.0",
    "vitest": "^0.25.3"
  },
  "type": "module"
}

Environment

• OS: macOS 13.0.1 (22A400)
• Node.js version: v19.2.0
• NPM version: 8.19.3
• Browser (if applicable): n/a
• Browser version (if applicable): n/a
• Device (if applicable): Mac Studio

Additional context

I cannot get Sveltekit + Storybook 6 to work at all, despite following several contradictory guides. Storybook 7 at least works, but without addon-svelte-csf, it appears to be a major pain to use slots — so I really need to work out what's going on here, as Storybook's not likely to get adopted here if it's a major pain…

[JReinhold]

Thanks for the detailed bug report. We're fixing the peer dependency version ranges, and the fix should be out with the next beta release soon.

[unikitty37]

Thanks! npm install now works with v3.0.0-next.2 😀

[shilman]

🚀 Issue was released in v3.0.0 🚀