Basic Usage example from documentation not working: preview.js not found

AtsMultanen commented 2 months ago

Environment

Operating System: Linux
Node Version: v18.20.3
Nuxt Version: 3.13.1
CLI Version: 3.13.2
Nitro Version: 2.9.7
Package Manager: npm@10.2.3
Builder: -
User Config: devtools, modules, compatibilityDate
Runtime Modules: @nuxtjs/storybook@8.2.0
Build Modules: -

Reproduction

https://stackblitz.com/github/nuxt-modules/storybook/tree/main/examples/starter?file=components%2FMyNuxtWelcome.stories.js&embed=1

Describe the bug

I've tried to set up this module for the last 2 days on a blank project and it simply will not start. Been running into various issues (several reported here), but can't seem to crack it and actually get any of the stories to render. Then I realised even the examples in the documentation are not actually starting up (stuck loading): https://storybook.nuxtjs.org/examples/basic

There seem to be some dependency issues as per the terminal

I've been trying various different combinations of the dependencies but they all lead to different issues. I'd really appreciate if someone could just post a recent working example so I could just fork off of that.

Additional context

No response

mateusmcordeiro commented 1 month ago

same here. I've succeeded using the Vite approach, but it's not the best solution. With this method, you need to start both separately. But its a way of start using storybook until this problem got solved.

exophunk commented 1 month ago

Gettings storybook to run is an absolute nightmare. None of the documentations is up to date and a mix of tutorials + installer scripts just install a random clusterfuck of incompatibilities.

both this repo documentation, examples and all official storybook nuxt examples or install-helpers are not working.

Try this: https://github.com/exophunk/nuxt-storybook-showcase

Here you find a running set of dependencies that work (currently!) for Nuxt + Storybook:

 "dependencies": {
        "nuxt": "3.13.2",
    },
    "devDependencies": {
        "@nuxtjs/storybook": "npm:@nuxtjs/storybook@nightly",
        "@storybook/addon-essentials": "8.3.1",
        "@storybook/addon-interactions": "8.3.1",
        "@storybook/addon-links": "8.3.1",
        "storybook": "8.3.1"
    },

use nuxt/storybook nightly
use storybook 8.3.1
important: add optimizeDeps option to nuxt: https://github.com/exophunk/nuxt-storybook-showcase/blob/main/nuxt.config.ts#L49 (workaround for #776)

Make sure to be careful when updating any dependencies because storybook likely stops working on the smallest minor update

tobiasdiez commented 1 month ago

I very much understand the frustration. In fact, I myself are not able to use this module in one of my projects (to enable this was actually one of my motivation helping with the maintenance of the module). I have a few PR upstream in the storybook repo that improve various aspects of the setup. Let's hope they get merged soon.

@exophunk Thanks for creating a working example. Could you perhaps add the additional steps to the documentation? That would be great!

tobiasdiez commented 1 month ago

@chakAs3 could you please create a new release? There are a few improvements in the current version that would be great to get out. Thanks!

chakAs3 commented 1 month ago

@chakAs3 could you please create a new release? There are a few improvements in the current version that would be great to get out. Thanks!

Hi @tobiasdiez, I just published a new release, but I encountered a strange issue when running pnpm release. It ended up creating a nightly release instead. I checked the scripts in package.json and prepare-release.ts, and everything seems fine. However, instead of running:

"release": "pnpm jiti prepare-release.ts && pnpm publish --recursive && git push --follow-tags"

it ran:

"prerelease": "pnpm jiti prepare-release.ts --nightly && pnpm publish --recursive --tag nightly --access public --no-git-checks --provenance --report-summary"

I had to manually run the script in the terminal:

pnpm jiti prepare-release.ts && pnpm publish --recursive && git push --follow-tags to create the release. Could this be a bug in pnpm? Any ideas?

tobiasdiez commented 1 month ago

Thanks for the new release @chakAs3! The pnpm issue sounds very strange. Maybe pnpm automatically invokes all commands with the suffix pre before the actual command? Maybe test for the next release if it works when you rename prerelease to nightly or something.

kogratte commented 1 month ago

Hey there!

Despite trying both the nightly and the latest release, I'm not able to make storybook work.

I followed the instructions and informations available here, but without being lucky enough.

Here is a little bit of context:

Operating System: Darwin
Node Version: v22.3.0
Nuxt Version: 3.12.3
CLI Version: 3.14.0
Nitro Version: 2.9.7
Package Manager: yarn@4.5.0

I end up with

 ERROR  (node:3516) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.                         11:54:28 AM
(Use node --trace-warnings ... to show where the warning was created)

 ERROR  Storybook failed to load the following preset: @storybook-vue/nuxt/preset.

chakAs3 commented 1 month ago

@kogratte i think there is an issue with the package manager used .. i recommend using pnpm

chakAs3 commented 1 month ago

@kogratte i forked your repo with some adjustments check it out https://stackblitz.com/~/github.com/exophunk/nuxt-storybook-showcase

kogratte commented 1 month ago

Will look! Thanks :)

nuxt-modules / storybook