can't install Storybook in Svelte apps created with Vite or SvelteKit

[mvolkmann]

Describe the bug
Storybook for Svelte wants to use version 2.9.1 of svelte-loader, but Svelte apps created with Vite or SvelteKit want to use version 3.1.1. These appear to be incompatible and this prevents the use of Storybook in these projects.

To Reproduce
I tried to create a reproduction repo by running npx sb@next repro, but that errored out with "Failed to create repro".

Here are steps that reproduce the issue:

• npm init svelte@next storybook-issue
• select "Skeleton project"
• select "No" for all the remaining questions
• cd storybook-issue
• npm install
• npx sb init
• npm audit fix

This will output the following:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: svelte-loader@3.1.1
npm ERR! node_modules/svelte-loader
npm ERR!   dev svelte-loader@"^3.1.1" from the root project
npm ERR!   peer svelte-loader@"*" from @storybook/svelte@6.2.9
npm ERR!   node_modules/@storybook/svelte
npm ERR!     dev @storybook/svelte@"^6.2.9" from the root project
npm ERR!     peer @storybook/svelte@"^6.1.20" from @storybook/addon-svelte-csf@1.0.0
npm ERR!     node_modules/@storybook/addon-svelte-csf
npm ERR!       dev @storybook/addon-svelte-csf@"^1.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer svelte-loader@"^2.9.1" from @storybook/addon-svelte-csf@1.0.0
npm ERR! node_modules/@storybook/addon-svelte-csf
npm ERR!   dev @storybook/addon-svelte-csf@"^1.0.0" from the root project

System
Please paste the results of npx sb@next info here.

  System:
    OS: macOS 11.3.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 16.1.0 - /usr/local/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.11.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
    Firefox: 86.0
    Safari: 14.1
  npmPackages:
    @storybook/addon-actions: ^6.2.9 => 6.2.9
    @storybook/addon-essentials: ^6.2.9 => 6.2.9
    @storybook/addon-links: ^6.2.9 => 6.2.9
    @storybook/addon-svelte-csf: ^1.0.0 => 1.0.0
    @storybook/svelte: ^6.2.9 => 6.2.9

[shilman]

I don't think this will solve your problem, but more as an FYI: https://github.com/eirslett/storybook-builder-vite

In addition to your instructions above, I upgraded storybook to the latest alpha and tried it with the standard webpack builder as well as with the vite builder. In both cases I got this error:

info @storybook/svelte v6.3.0-alpha.45
info
ERR! Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/shilman/projects/testing/storybook-vite/storybook-issue/.storybook/main.js
ERR! require() of ES modules is not supported.
ERR! require() of /Users/shilman/projects/testing/storybook-vite/storybook-issue/.storybook/main.js from /Users/shilman/projects/testing/storybook-vite/storybook-issue/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/shilman/projects/testing/storybook-vite/storybook-issue/package.json.

@j3rem1e is this something you have time to look at?

[j3rem1e]

The dependencies have been fixed in this PR : storybookjs/addon-svelte-csf#19 (not released)

In for the error you see, it is the same issue as #11587
There are in this thread and in discord some workaround.

For svelte, the easiest way i found is :

• renaming main.js to main.cjs
• removing the require from 'svelte.config.js'. If a preprocessor is need, it can be configured here

For me, the main issue is that 'main.js' is require()d by the builder (core-common/serverRequire) but should be imported if the project is configured to uses type:module. however, i am clearly not an expert on this. cjs/esm on node is really...weird

[rcmcsweeney]

This workaround may help.
I'm using pnpm but I'm sure you can drop the first p.
Also not an expert on this.

[IanVS]

This should be addressed in the recent versions of storybook 7 and the addon-svelte-csf. Please let us know if you're still having trouble with it.