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

[AtsMultanen]

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]

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]

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 The requested module '/node_modules/jsdoc-type-pratt-parser/dist/index.js?v=dd771ee8' does not provide an export named 'parse' #776)

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

[tobiasdiez]

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]

@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!