[Bug]: Could not resolve "@storybook/icons" - After installing @storybook/addon-a11y

Drew-Daniels commented 6 months ago

Describe the bug

I am following this tutorial, and after getting to the "Catch Accessibility Issues" section, and installing @storybook/addon-a11y, when I then run yarn storybook, I get a build error saying the following:

❯ yarn storybook
yarn run v1.22.21
$ storybook dev -p 6006
@storybook/cli v7.6.6

info => Serving static files from ././public at /
info => Starting manager..
✘ [ERROR] Could not resolve "@storybook/icons"

    node_modules/@storybook/addon-a11y/dist/manager.js:6:77:
      6 │ ...mallDownIcon, SyncIcon, AccessibilityIcon, CheckIcon } from '@storybook/icons';
        ╵                                                                ~~~~~~~~~~~~~~~~~~

  You can mark the path "@storybook/icons" as external to exclude it from the bundle, which
  will remove this error.

Error: Build failed with 1 error:
node_modules/@storybook/addon-a11y/dist/manager.js:6:77: ERROR: Could not resolve "@storybook/icons"
    at failureErrorWithLog (./node_modules/esbuild/lib/main.js:1649:15)
    at ./node_modules/esbuild/lib/main.js:1058:25
    at runOnEndCallbacks (./node_modules/esbuild/lib/main.js:1484:45)
    at buildResponseToResult (./node_modules/esbuild/lib/main.js:1056:7)
    at ./node_modules/esbuild/lib/main.js:1085:16
    at responseCallbacks.<computed> (./node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (./node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (./node_modules/esbuild/lib/main.js:679:7)
    at Socket.emit (node:events:518: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.

To Reproduce

Complete the aforementioned tutorial up through the "Catch Accountability Issues" section, and after installing @storybook/addon-a11y, try running yarn storybook.

You should get an error saying that the @storybook/images module can't be found.

System

❯ npx storybook@latest info
Need to install the following packages:
storybook@8.0.5
Ok to proceed? (y) y

Storybook Environment Info:

  System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.local/share/mise/installs/node/20/bin/node
    Yarn: 1.22.21 - ~/.local/share/mise/installs/node/20/bin/yarn <----- active
    npm: 10.2.4 - ~/.local/share/mise/installs/node/20/bin/npm
    pnpm: 8.15.5 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 123.0.6312.86
    Safari: 17.3.1
  npmPackages:
    @storybook/addon-a11y: ^8.0.5 => 8.0.5
    @storybook/addon-essentials: ^7.6.6 => 7.6.6
    @storybook/addon-interactions: ^7.6.6 => 7.6.6
    @storybook/addon-links: ^7.6.6 => 7.6.6
    @storybook/blocks: ^7.6.6 => 7.6.6
    @storybook/react: ^7.6.6 => 7.6.6
    @storybook/react-vite: ^7.6.6 => 7.6.6
    @storybook/test: ^7.6.6 => 7.6.6
    msw-storybook-addon: ^1.10.0 => 1.10.0
    storybook: ^7.6.6 => 7.6.6

Additional context

I have tried:

Installing @storybook/icons with yarn add -D @storybook/icons, but after I do this, and re-runyarn storybook, I get another error saying:

❯ yarn storybook
yarn run v1.22.21
$ storybook dev -p 6006
@storybook/cli v7.6.6

info => Serving static files from ././public at /
info => Starting manager..
✘ [ERROR] No matching export in "global-externals:@storybook/components" for import "EmptyTabContent"

    node_modules/@storybook/addon-a11y/dist/manager.js:4:89:
      4 │ ... ActionBar, ScrollArea, Spaced, EmptyTabContent } from '@storybook/components';
        ╵                                    ~~~~~~~~~~~~~~~

SB_CORE-SERVER_0004 (NoMatchingExportError): There was an exports mismatch error when trying to build Storybook.
Please check whether the versions of your Storybook packages match whenever possible, as this might be the cause.

Problematic example:
{ "@storybook/react": "7.5.3", "@storybook/react-vite": "7.4.5", "storybook": "7.3.0" }

Correct example:
{ "@storybook/react": "7.5.3", "@storybook/react-vite": "7.5.3", "storybook": "7.5.3" }

Please run `npx storybook@latest doctor` for guidance on how to fix this issue.
    at buildOrThrow (./node_modules/@storybook/core-server/dist/index.js:60:8467)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async buildDevStandalone (./node_modules/@storybook/core-server/dist/index.js:120:1397)
    at async withTelemetry (./node_modules/@storybook/core-server/dist/index.js:65:3948)
    at async dev (./node_modules/@storybook/cli/dist/generate.js:478:401)
    at async Command.<anonymous> (./node_modules/@storybook/cli/dist/generate.js:493:225)

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.

When I then run npx storybook@latest doctor, I get:

❯ npx storybook@latest doctor
🩺 The doctor is checking the health of your Storybook..
╭ Incompatible packages found ───────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                    │
│   The following packages are incompatible with Storybook 7.6.6 as they depend on different major versions of Storybook packages:   │
│   - @storybook/addon-a11y@8.0.5                                                                                                    │
│    Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/a11y                                                       │
│                                                                                                                                    │
│                                                                                                                                    │
│   Please consider updating your packages or contacting the maintainers for compatibility details.                                  │
│   For more on Storybook 8 compatibility, see the linked GitHub issue:                                                              │
│   https://github.com/storybookjs/storybook/issues/26031                                                                            │
│                                                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

You can always recheck the health of your project by running:
npx storybook doctor

Full logs are available in /Users/drew/projects/taskbox/doctor-storybook.log

robmaurizi commented 6 months ago

@Drew-Daniels Are you using Storybook v.7? I am and just tried to install @storybook/addon-a11y and got the same icons error. I was able to get it spun up by installing a V7 version of addon-a11y from https://www.npmjs.com/package/@storybook/addon-a11y/v/7.6.16

n8finch commented 6 months ago

I was able to get it spun up by installing a V7 version of addon-a11y from https://www.npmjs.com/package/@storybook/addon-a11y/v/7.6.16

Thanks @robmaurizi , this worked!

jonniebigodes commented 6 months ago

@Drew-Daniels thanks for reaching out to us with your issue. We appreciate it 🙏 ! I'm aware of the situation, and the tutorials still need some work done (including templates). I've been unable to commit to it as other priorities took precedence before I could commit to it. Hopefully, this situation will be addressed soon, and you and any other user who follows said tutorials can go through them without the issue you've reported.

@robmaurizi appreciate the assistance and helping @Drew-Daniels and @n8finch solve it.

Hope you have a fantastic day.

Stay safe

Drew-Daniels commented 6 months ago

@jonniebigodes Sure thing, thanks for the confirmation and for looking into this. It's nbd just wanted to put something out there in case others ran into a similar issue 👍🏻

Appreciate all the work you and everyone else do with storybook!

nadernader99 commented 6 months ago

@Drew-Daniels Are you using Storybook v.7? I am and just tried to install @storybook/addon-a11y and got the same icons error. I was able to get it spun up by installing a V7 version of addon-a11y from https://www.npmjs.com/package/@storybook/addon-a11y/v/7.6.16

I had the same problem today. Confirm running yarn add --dev @storybook/addon-a11y@7.6.16 resolved the issue.

justnewbee commented 4 months ago

It also happens in version 8.1.7, vite react setup, reported by @storybook+addon-onboarding@8.1.10.

Seems like you guys misplaced @storybook/icons as a dev-dependency.

designbyadrian commented 3 months ago

@Drew-Daniels Are you using Storybook v.7? I am and just tried to install @storybook/addon-a11y and got the same icons error. I was able to get it spun up by installing a V7 version of addon-a11y from https://www.npmjs.com/package/@storybook/addon-a11y/v/7.6.16

I'd just like to chime in and say I had the same issue with @storybook/test with a lot of errors telling me that I

can mark the path "storybook/internal/client-logger" as external to exclude it from the bundle, which will remove this error.

and other storybook/internal packages.

I had accidentally installed @storybook/test@8 while still being on Storybook 7. Downgrading @storybook/test to 7 solved my issues.

storybookjs / storybook