Apress / Developing-Web-Components-with-Svelte

Source code for Developing Web Components with Svelte by Alex Libby
Other
4 stars 7 forks source link

Storybook for Svelte project #1

Open edbek opened 1 year ago

edbek commented 1 year ago

To be honest, no matter how hard I tried, I couldn't install Storybook for Svelte project (SETTING UP STORYBOOK). Maybe there are some subtleties in the installation that are not indicated in the book?

ctp-placebo commented 1 year ago

Same issue, tried all variations of initializing storybook for Vite & Svelte without success.

npx storybook@latest init

storybook init - the simplest way to add a Storybook to your project.

• Detecting project type. ✓ Detected Vite project. Setting builder to Vite • Adding Storybook support to your "Svelte" app

 Unable to find versions of storybook using npm
 Unable to find versions of @storybook/svelte using npm
 Unable to find versions of @storybook/svelte using npm
 Unable to find versions of @storybook/svelte-vite using npm
 Unable to find versions of @storybook/addon-links using npm
 Unable to find versions of @storybook/addon-essentials using npm
 Unable to find versions of @storybook/blocks using npm
 Unable to find versions of @storybook/addon-interactions using npm
 Unable to find versions of @storybook/testing-library using npm
 Unable to find versions of react using npm
 Unable to find versions of react-dom using npm

Using the book's code:

$ npx sb init --builder @storybook/builder-vite

storybook init - the simplest way to add a Storybook to your project.

• Detecting project type. ✓ • Adding Storybook support to your "Svelte" app Error: Sorry, for now, you can not do this, please use a framework such as @storybook/react-webpack5

https://github.com/storybookjs/storybook/issues/18360 at baseGenerator (/home/c74/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:40:10688) at async generator19 (/home/c74/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:61:2421) at async doInitiate (/home/c74/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:352:125) at async withTelemetry (/home/c74/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/core-server/dist/index.js:35:3422) at async initiate (/home/c74/.npm/_npx/d28cfb4b54958d89/node_modules/@storybook/cli/dist/generate.js:363:109)

I have also tried forcing use of v7 of Storybook with the same results.

Not going past a free trial of this book until I can get past Ch1 without issues :D

using Ubuntu 22.04 LTS Node 18.15 npm 9.6.2

ctp-placebo commented 1 year ago

Having tried everything under the sun to get Storybook to run with the basic Chapter 2 app, I gave up and tried Histoire instead.
Link to the Svelte 3 installer and setup guide

This appears to work. At least I could run the scripts for dev & preview, and open a (for now) blank page in the browser where the "stories" will go once I have any to show.

valentinpalkovic commented 1 year ago

@ctp-placebo, @edbek

Hey there! I am one of the Storybook maintainers and will try to help you. Could you elaborate on which particular steps you tried to set up Svelte with Storybook?

valentinpalkovic commented 1 year ago

The trick is to NOT run npx sb init --builder @storybook/builder-vite but just npx storybook@latest init instead.

valentinpalkovic commented 1 year ago

@ctp-placebo

 Unable to find versions of storybook using npm
 Unable to find versions of @storybook/svelte using npm
 Unable to find versions of @storybook/svelte using npm
 Unable to find versions of @storybook/svelte-vite using npm
 Unable to find versions of @storybook/addon-links using npm
 Unable to find versions of @storybook/addon-essentials using npm
 Unable to find versions of @storybook/blocks using npm
 Unable to find versions of @storybook/addon-interactions using npm
 Unable to find versions of @storybook/testing-library using npm
 Unable to find versions of react using npm
 Unable to find versions of react-dom using npm

I will try to figure out why you get these messages and will get back to you soon.

valentinpalkovic commented 1 year ago

@ctp-placebo Are you using a VPN at work or an unusual npm registry setup (e.g. nexus)?

yannbf commented 1 year ago

Hey peeps, the latest version of Storybook fixed a bug where the initialization of Storybook should work now with the --builder option (which seems like what is suggested via the book). This helped us fix that bug, so thanks for opening this issue!