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: [email protected]
• Builder: -
• User Config: devtools, modules, compatibilityDate
• Runtime Modules: @nuxtjs/[email protected]
• 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!

[chakAs3]

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

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]

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: [email protected]

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]

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

[chakAs3]

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

[kogratte]

Will look! Thanks :)