search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.08k stars 9.25k forks source link

What setup do you recommend to use Storybook with Vue, Nuxt and TailwindCSS? #28763

Closed rowphant closed 1 month ago

rowphant commented 1 month ago

Describe the bug

Long story short:

I am thrilled for the concept of storybook for years and use it in many projects. Now I am about to set up a new JAM-Stack but I'm perishing because for unknown reasons, not a single of your "How-to" Tutorials and Examples is working.

My Setup is the following: Vite, Vue, Nuxt, TailwindCSS

When I try npx storybook@latest init it says storybook would be installed, but there a neither any new dependencies nor are there new files or scripts in package.json. Before posting any long excerpts or outputs of the CLI I want to ask you what you reccommend to set up a stack with the the packages Vite, Vue, Nuxt, TailwindCSS.

Reproduction link

https://google.com

Reproduction steps

No response

System

System:
    OS: macOS 12.6.3
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.9.0/bin/yarn <----- active
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 9.6.0 - ~/.nvm/versions/node/v20.9.0/bin/pnpm
  Browsers:
    Chrome: 127.0.6533.74
    Safari: 15.6.1

Additional context

No response

greptile-apps[bot] commented 1 month ago

Disclaimer This information might be inaccurate, due to it being generated automatically To set up Storybook with Vite, Vue, Nuxt, and TailwindCSS, follow these steps:

  1. Install Storybook:

    npx storybook@latest init

  2. Install Vite Builder:

    npm install @storybook/builder-vite --save-dev

  3. Update .storybook/main.js:

    module.exports = {
 framework: '@storybook/vue3-vite',
 core: {
   builder: 'vite',
 },
};

  4. Configure TailwindCSS: Follow the TailwindCSS setup guide.

Refer to the Vue & Vite documentation for more details.

References

/docs/get-started/install.mdx /docs/get-started/frameworks/react-vite.mdx /docs/builders/vite.mdx /docs/get-started/frameworks/vue3-webpack5.mdx /docs/get-started/frameworks/vue3-vite.mdx /code/frameworks/svelte-vite/README.md /code/builders/builder-vite/README.md /docs/_snippets/web-components-vite-install.md /code/frameworks/vue3-webpack5 /code/frameworks/web-components-vite /code/core/src/server-errors.ts /docs/contribute/how-to-reproduce.mdx /docs/get-started/frameworks/svelte-vite.mdx /test-storybooks/portable-stories-kitchen-sink/vue3 /docs/_snippets/svelte-webpack5-install.md /docs/_snippets/vue3-webpack5-install.md /code/frameworks/web-components-vite/README.md /docs/_snippets/svelte-vite-install.md /code/lib/cli/src/automigrate/fixes/webpack5-compiler-setup.ts /code/frameworks/vue3-vite /code/frameworks/sveltekit/README.md /code/frameworks/vue3-vite/README.md /docs/get-started/setup.mdx /code/lib/cli-storybook /code/lib/cli/src/automigrate/fixes/vue3.ts

#### About Greptile This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)
rowphant commented 1 month ago

Well thanks to the bot. But thats exactly what i described before. It is not working.

`% npm run storybook

app@0.0.0 storybook storybook dev -p 6006

storybook v8.2.7

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details. info => Starting manager.. ✘ [ERROR] Could not resolve "@storybook/addon-viewport/manager"

node_modules/@storybook/addon-essentials/dist/viewport/manager.js:1:14:
  1 │ export * from '@storybook/addon-viewport/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-viewport" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-viewport/manager" 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 "@storybook/addon-backgrounds/manager"

node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14:
  1 │ export * from '@storybook/addon-backgrounds/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-backgrounds" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-backgrounds/manager" 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 "@storybook/addon-controls/manager"

node_modules/@storybook/addon-essentials/dist/controls/manager.js:1:14:
  1 │ export * from '@storybook/addon-controls/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-controls" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-controls/manager" 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 "@storybook/addon-actions/manager"

node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14:
  1 │ export * from '@storybook/addon-actions/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-actions" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-actions/manager" 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 "@storybook/addon-measure/manager"

node_modules/@storybook/addon-essentials/dist/measure/manager.js:1:14:
  1 │ export * from '@storybook/addon-measure/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-measure" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-measure/manager" 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 "@storybook/addon-outline/manager"

node_modules/@storybook/addon-essentials/dist/outline/manager.js:1:14:
  1 │ export * from '@storybook/addon-outline/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-outline" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-outline/manager" 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 "@storybook/addon-toolbars/manager"

node_modules/@storybook/addon-essentials/dist/toolbars/manager.js:1:14:
  1 │ export * from '@storybook/addon-toolbars/manager';
    ╵               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/addon-toolbars" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/addon-toolbars/manager" 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 "storybook/internal/core-events"

node_modules/@storybook/addon-onboarding/dist/manager.js:4:32:
  4 │ import { STORY_SPECIFIED } from 'storybook/internal/core-events';
    ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "storybook" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "storybook/internal/core-events" 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 "storybook/internal/core-events"

node_modules/@storybook/addon-onboarding/dist/Onboarding-HXJGOQAD.js:2:36:
  2 │ import { SAVE_STORY_RESPONSE } from 'storybook/internal/core-events';
    ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "storybook" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "storybook/internal/core-events" 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 "@storybook/instrumenter"

node_modules/@storybook/addon-interactions/dist/manager.js:5:35:
  5 │ import { CallStates, EVENTS } from '@storybook/instrumenter';
    ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/instrumenter" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/instrumenter" 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 "@storybook/global"

node_modules/@storybook/addon-interactions/dist/manager.js:6:23:
  6 │ import { global } from '@storybook/global';
    ╵                        ~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "@storybook/global" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "@storybook/global" 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 "storybook/internal/core-events"

node_modules/@storybook/addon-interactions/dist/manager.js:7:144:
  7 │ ...NCTION_THREW_EXCEPTION, UNHANDLED_ERRORS_WHILE_PLAYING, FORCE_REMOUNT } from 'storybook/internal/core-events';
    ╵                                                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "storybook" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "storybook/internal/core-events" 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 "filesize"

node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25:
  7 │ import { filesize } from 'filesize';
    ╵                          ~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "filesize" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "filesize" 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 "polished"

node_modules/@storybook/addon-interactions/dist/manager.js:9:31:
  9 │ import { transparentize } from 'polished';
    ╵                                ~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "polished" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "polished" 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 "react-confetti"

node_modules/@storybook/addon-onboarding/dist/Onboarding-HXJGOQAD.js:9:26:
  9 │ import ReactConfetti from 'react-confetti';
    ╵                           ~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "react-confetti" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "react-confetti" 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 "react-confetti"

node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15:
  10 │ import s8 from 'react-confetti';
     ╵                ~~~~~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "react-confetti" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "react-confetti" 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 "strip-ansi"

node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15:
  11 │ import b8 from 'strip-ansi';
     ╵                ~~~~~~~~~~~~

The Yarn Plug'n'Play manifest forbids importing "strip-ansi" here because it's not listed as a dependency of this package:

../../.pnp.cjs:37:31:
  37 │         "packageDependencies": [\
     ╵                                ~~

You can mark the path "strip-ansi" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

Error: Build failed with 17 errors: node_modules/@chromatic-com/storybook/dist/manager.mjs:7:25: ERROR: Could not resolve "filesize" node_modules/@chromatic-com/storybook/dist/manager.mjs:10:15: ERROR: Could not resolve "react-confetti" node_modules/@chromatic-com/storybook/dist/manager.mjs:11:15: ERROR: Could not resolve "strip-ansi" node_modules/@storybook/addon-essentials/dist/actions/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-actions/manager" node_modules/@storybook/addon-essentials/dist/backgrounds/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-backgrounds/manager" ... at failureErrorWithLog (./node_modules/esbuild/lib/main.js:1472:15) at ./node_modules/esbuild/lib/main.js:945:25 at runOnEndCallbacks (./node_modules/esbuild/lib/main.js:1315:45) at buildResponseToResult (./node_modules/esbuild/lib/main.js:943:7) at ./node_modules/esbuild/lib/main.js:970:16 at responseCallbacks. (./node_modules/esbuild/lib/main.js:622:9) at handleIncomingPacket (./node_modules/esbuild/lib/main.js:677:12) at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:600:7) at Socket.emit (node:events:514:28) at addChunk (node:internal/streams/readable:376:12)

WARN Broken build, fix the error above. WARN You may need to refresh the browser.`

rowphant commented 1 month ago

I dont get what's wrong with storybook development. I mean not even the basic installation routine is working anymore. So for now storybook is just useless :/