search

nuxt-modules / storybook

Storybook integration with Nuxt.
https://storybook.nuxtjs.org
410 stars 95 forks source link

The module isnt' working on a fresh Nuxt install #754

Closed datsenkoboos closed 3 months ago

datsenkoboos commented 3 months ago

Hi, i can't get the module to work either with a freshly initialized Nuxt app or with the example starter from the module repo. Here's what happens on a fresh Nuxt install:

Repoduction repo

  1. Initialize a Nuxt app with pnpm dlx nuxi@latest init

  2. Run pnpm dlx nuxi@latest module add storybook

  3. Run pnpm dev and get the error: Storybook needs a "main.js" file, even though the module docs say:

    If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.

  4. Run pnpm dlx storybook-nuxt init

  5. Run pnpm dev and get the error:

    Context conflict                                     nuxt:storybook:build 11:55:25 AM

at checkConflict (node_modules/.pnpm/nuxi@3.12.0/node_modules/nuxi/dist/shared/nuxi.a5b1f4d1.mjs:21:13)
at Object.set (node_modules/.pnpm/nuxi@3.12.0/node_modules/nuxi/dist/shared/nuxi.a5b1f4d1.mjs:55:9)
at initNuxt (node_modules/.pnpm/nuxt@3.12.4_@parcel+watcher@2.4.1_@types+node@18.19.44_ioredis@5.4.1_magicast@0.3.4_rollup@4._ksojethl2fpmtynbpdu5jzcccy/node_modules/nuxt/dist/index.mjs:4205:11)
at Object.ready (node_modules/.pnpm/nuxt@3.12.4_@parcel+watcher@2.4.1_@types+node@18.19.44_ioredis@5.4.1_magicast@0.3.4_rollup@4._ksojethl2fpmtynbpdu5jzcccy/node_modules/nuxt/dist/index.mjs:4107:18)
at defineNuxtConfig (node_modules/.pnpm/@storybook-vue+nuxt@0.2.6_@types+node@18.19.44_magicast@0.3.4_nuxt@3.12.4_@parcel+watcher@2.4_totxqcalgnom6mrxxrxgiudy2i/node_modules/@storybook-vue/nuxt/dist/preset.cjs:6744:14)
at async Object.viteFinal (node_modules/.pnpm/@storybook-vue+nuxt@0.2.6_@types+node@18.19.44_magicast@0.3.4_nuxt@3.12.4_@parcel+watcher@2.4_totxqcalgnom6mrxxrxgiudy2i/node_modules/@storybook-vue/nuxt/dist/preset.cjs:6773:22)
at async createViteServer (node_modules/.pnpm/@storybook+builder-vite@8.0.8_typescript@5.5.4_vite@5.4.0_@types+node@18.19.44_terser@5.31.6_/node_modules/@storybook/builder-vite/dist/index.js:55:11505)
at async Module.start (node_modules/.pnpm/@storybook+builder-vite@8.0.8_typescript@5.5.4_vite@5.4.0_@types+node@18.19.44_terser@5.31.6_/node_modules/@storybook/builder-vite/dist/index.js:58:1102)
at async storybookDevServer (node_modules/.pnpm/@storybook+core@8.2.9/node_modules/@storybook/core/dist/core-server/index.js:255880:11)
at async buildOrThrow (node_modules/.pnpm/@storybook+core@8.2.9/node_modules/@storybook/core/dist/core-server/index.js:255392:12)

  6. Run pnpm storybook and get the error: The entry point "vue" cannot be marked as external

  7. Remove @nuxtjs/storybook from dependencies and update its version in devDependencies from 7.0.2 generated by storybook-nuxt init to 8.1.5 (see the commit)

  8. Run pnpm dev and get the Context conflict error

  9. Run pnpm storybook and the 'The entry point "vue" cannot be marked as external error.

  10. Bump @storybook-vue/nuxt package version to 0.2.8 as stated in this comment

  11. Run pnpm dev and get the error: Could not resolve "#app/entry"

  12. Run pnpm storybook and get the same error

I'm ready to provide additional info if needed.

datsenkoboos commented 3 months ago

UPD: Downgrading nuxt to 3.11.2 and @storybook-vue/nuxt to 0.2.6 gets rid of errors when runnning pnpm storybook, but results in the Context conflict error when running pnpm dev.

melvinprindustry commented 3 months ago

We have the same issues and it's extremely frustrating. If you figure out how to get storybook working properly please let me know!

marcooop commented 3 months ago

@melvinprindustry The latest fixes seem to solve that problem. Wether you wait till the next release or just use the nightly build in the package.json.

"devDependencies": { ... "@nuxtjs/storybook": "npm:@nuxtjs/storybook@nightly", ... }

Solved it for me. Still got some other errors, but i can work. Those may occur through some finesse of the main app.

datsenkoboos commented 3 months ago

I've tried using the nightly build, and i'm getting these errors both locally and on CodeSandbox:

image

Codesandbox reprod; Repo

@marcooop @tobiasdiez What am i missing?

tobiasdiez commented 3 months ago

Remove the dependency "@storybook-vue/nuxt": "^8.1.5",

datsenkoboos commented 3 months ago

Thank you! The errors have been resolved. But my component isn't being rendered in the Storybook preview, it fails with this error:

image

Warnings are still present in the terminal:

image

What could be the issue?

maximilian-schwarz commented 3 months ago

@datsenkoboos Got the same error message like you :(

tobiasdiez commented 3 months ago

Try setting https://nuxt.com/docs/api/nuxt-config#runtime compiler to true.

maximilian-schwarz commented 3 months ago

Thanks @tobiasdiez If you set the runtimeCompiler to true the [Vue warn] is gone.

But the two warnings are still there:

 WARN  Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files                                                                                                                                                                                                                                                                               15:22:57
 WARN  Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
tobiasdiez commented 3 months ago

These warnings are an issue with the upstream storybook packages (also appear in a pure vue-setting without nuxt).