storybookjs / storybook

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

[Documentation]: Following Introduction tutorial results in error. #29022

Closed 88potatoes closed 1 month ago

88potatoes commented 2 months ago

Describe the problem

I'm new so I followed the introduction tutorial ("Getting started" and "Simple component") and it resulted in an error. I retried the tutorial again and got the same error.

yarn run v1.22.22
warning ../../package.json: No license field
$ storybook dev -p 6006
@storybook/cli v8.1.4

(node:26527) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
WARN The following packages are incompatible with Storybook 8.1.4 as they depend on different major versions of Storybook packages:
WARN - @storybook/addon-a11y@8.2.9
WARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/a11y
WARN 
WARN 
WARN Please consider updating your packages or contacting the maintainers for compatibility details.
WARN For more on Storybook 8 compatibility, see the linked GitHub issue:
WARN https://github.com/storybookjs/storybook/issues/26031
info => Serving static files from ././public at /
info => Starting manager..
✘ [ERROR] Could not resolve "storybook/internal/manager-api"

    node_modules/@storybook/addon-a11y/dist/manager.js:3:107:
      3 │ import { addons, types, useAddonState, useStorybookApi, useChannel, useParameter, useStorybookState } from 'storybook/internal/manager-api';
        ╵                                                                                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "storybook/internal/manager-api" 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/components"

    node_modules/@storybook/addon-a11y/dist/manager.js:4:112:
      4 │ ... { Badge, WithTooltip, TooltipLinkList, IconButton, ActionBar, ScrollArea, Spaced, EmptyTabContent } from 'storybook/internal/components';
        ╵                                                                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

    node_modules/@storybook/addon-a11y/dist/manager.js:5:48:
      5 │ import { styled, convert, themes, Global } from 'storybook/internal/theming';
        ╵                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "storybook/internal/theming" 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-a11y/dist/manager.js:8:46:
      8 │ import { STORY_RENDERED, STORY_CHANGED } from 'storybook/internal/core-events';
        ╵                                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  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: Build failed with 4 errors:
node_modules/@storybook/addon-a11y/dist/manager.js:3:107: ERROR: Could not resolve "storybook/internal/manager-api"
node_modules/@storybook/addon-a11y/dist/manager.js:4:112: ERROR: Could not resolve "storybook/internal/components"
node_modules/@storybook/addon-a11y/dist/manager.js:5:48: ERROR: Could not resolve "storybook/internal/theming"
node_modules/@storybook/addon-a11y/dist/manager.js:8:46: ERROR: Could not resolve "storybook/internal/core-events"
    at failureErrorWithLog (./node_modules/esbuild/lib/main.js:1651:15)
    at ./node_modules/esbuild/lib/main.js:1059:25
    at runOnEndCallbacks (./node_modules/esbuild/lib/main.js:1486:45)
    at buildResponseToResult (./node_modules/esbuild/lib/main.js:1057:7)
    at ./node_modules/esbuild/lib/main.js:1086:16
    at responseCallbacks.<computed> (./node_modules/esbuild/lib/main.js:704:9)
    at handleIncomingPacket (./node_modules/esbuild/lib/main.js:764:9)
    at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:680:7)
    at Socket.emit (node:events:520:28)
    at addChunk (node:internal/streams/readable:559:12)

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

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

It appears on this line: image

Some help would be awesome :)

Additional context

No response

jonniebigodes commented 1 month ago

@88potatoes and everyone else, we appreciate the time you took to reach out to us with this issue 🙏 ! As I mentioned in #29078, I'm going to look into the tutorials shortly and make the necessary changes so that not only you but the rest of the community can follow along with the tutorial without any issues.

Hope you have a fantastic day.

Stay safe

jonniebigodes commented 1 month ago

I've taken some time this week to address the installation issue. I've tested with various versions of the tutorial, and everything seems to be working. I will close this issue for now, but feel free to ping me, and I'll gladly re-open it and follow up with you so we can continue to work on it until we find a solution.

Hope everyone has a great week.

Stay safe