storybook icon indicating copy to clipboard operation
storybook copied to clipboard

Not working with fresh layer template

Open tillsanders opened this issue 1 year ago • 5 comments

I've been trying to get Storybook to work with Nuxt 3, and it hasn't been going too well. I followed the Authoring Nuxt Layers Guide to set up a fresh layer using the 'layer' template. I then followed the setup instructions for this module.

Any help would be appreciated!

When starting storybook, I get these errors:

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:3:20:
      3 │ import plugins from '#build/plugins';
        ╵                     ~~~~~~~~~~~~~~~~

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:4:7:
      4 │ import '#build/css';
        ╵        ~~~~~~~~~~~~

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle.


✘ ERROR  error while updating dependencies:                                                                                                                                                                                                                                                         

Error: Build failed with 2 errors:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:3:20: ERROR: Could not resolve "#build/plugins"
node_modules/@storybook-vue/nuxt/dist/preview.mjs:4:7: ERROR: Could not resolve "#build/css"
    at failureErrorWithLog (/Users/finanzritter/Code/test/test-layer/node_modules/vite/node_modules/esbuild/lib/main.js:1651:15)
    at /Users/finanzritter/Code/test/test-layer/node_modules/vite/node_modules/esbuild/lib/main.js:1059:25
    at /Users/finanzritter/Code/test/test-layer/node_modules/vite/node_modules/esbuild/lib/main.js:1527:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

You can find a reproduction here:

  • https://github.com/tillsanders/nuxt-layer-storybook-reproduction
  • https://stackblitz.com/~/github.com/tillsanders/nuxt-layer-storybook-reproduction

Simply run npm install && npm run storybook and then open the NuxtWelcome > Docs page.

tillsanders avatar Feb 26 '24 19:02 tillsanders

Update: I tried the default Nuxt template and had the same issues. However, I was able to narrow it down to v0.2.2 of @storybook-vue/nuxt. v0.2.1 works for me. I also tried v0.2.3-alpha.10, but that version apparently got stuck in a build loop.

I'm not sure how these repositories are connected or where the actual bug is. Should I open a new issue there?

tillsanders avatar Feb 26 '24 21:02 tillsanders

same issue

baixiaoyu2997 avatar Feb 27 '24 05:02 baixiaoyu2997