[Bug?]: Storybook with Chakra UI?

[jwvanderbeck]

What's not working?

First please understand that I am NOT an experience web developer. My day job is in C# and Unity, this is just a side project.

I have installed Chakra UI into my empty Redwood project using the instructions here: https://chakra-ui.com/getting-started/redwoodjs-guide

Then attempted to activate Storybook based on the Redwood quickstart with the command: yarn rw storybook

This resulted in a lot of errors relating to the storybook plugin that Chakra UI's docs indicated to install. So I then removed that plugin and retried the command, but still get a lot of errors which I will indicate below.

$ yarn rw storybook
Initializing the Mock Service Worker at "/Users/john/DragonriderCreations/05-Development/MDBridge/web/public"...

Service Worker successfully created!
/Users/john/DragonriderCreations/05-Development/MDBridge/web/public/mockServiceWorker.js

Continue by creating a mocking definition module in your application:

https://mswjs.io/docs/getting-started/mocks

@storybook/cli v7.6.17

(node:61892) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info => Serving static files from /Users/john/DragonriderCreations/05-Development/MDBridge/web/public at /
info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.stories.@(js|jsx|ts|tsx|mdx)
✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [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:36:31:
      36 │         "packageDependencies": [\
         ╵                                ~~

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

✘ [ERROR] Could not resolve "@storybook/addon-highlight"

    ../node_modules/@storybook/addon-a11y/dist/manager.js:8:26:
      8 │ import { HIGHLIGHT } from '@storybook/addon-highlight';
        ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

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

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

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

Error: Build failed with 8 errors:
../node_modules/@storybook/addon-a11y/dist/manager.js:8:26: ERROR: Could not resolve "@storybook/addon-highlight"
../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"
../node_modules/@storybook/addon-essentials/dist/controls/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-controls/manager"
../node_modules/@storybook/addon-essentials/dist/measure/manager.js:1:14: ERROR: Could not resolve "@storybook/addon-measure/manager"
...
    at failureErrorWithLog (/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:1058:25
    at runOnEndCallbacks (/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:1484:45)
    at buildResponseToResult (/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:1056:7)
    at /Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:1085:16
    at responseCallbacks.<computed> (/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/esbuild/lib/main.js:679:7)
    at Socket.emit (node:events:519:28)
    at addChunk (node:internal/streams/readable:559:12)

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

Command failed with exit code 1: yarn storybook dev --config-dir "/Users/john/DragonriderCreations/05-Development/MDBridge/node_modules/@redwoodjs/testing/config/storybook" --webpack-stats-json --port 7910 --no-version-updates
MacBook-Pro.localdomain [~/DragonriderCreations/05-Development/MDBridge]```

### How do we reproduce the bug?

_No response_

### What's your environment? (If it applies)

```shell
$ yarn rw info

  System:
    OS: macOS 14.2
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 21.7.1 - /private/var/folders/m_/xhs4r85n13g59c266b7hy9640000gn/T/xfs-1d1a7c1c/node
    Yarn: 4.1.0 - /private/var/folders/m_/xhs4r85n13g59c266b7hy9640000gn/T/xfs-1d1a7c1c/yarn
  Databases:
    SQLite: 3.13.0 - /opt/local/bin/sqlite3
  Browsers:
    Chrome: 119.0.6045.159
    Safari: 17.2
  npmPackages:
    @redwoodjs/cli-storybook: 7.1.3 => 7.1.3 
    @redwoodjs/core: 7.1.3 => 7.1.3 
    @redwoodjs/project-config: 7.1.3 => 7.1.3 

### Are you interested in working on this?

- [ ] I'm interested in working on this

[Josh-Walker-GM]

Hey @jwvanderbeck 👋 Awesome to have you trying out redwood! We certainly want things to feel fun, easy, and approachable without requiring a large amount of other experience in web development so it's great to have you trying it out and providing feedback.

I tried to reproduce your error with the following steps:

1. yarn create redwood-app debug-chakra-storybook
2. cd debug-chakra-storybook
3. yarn
4. yarn rw info - just to confirm similar conditions as you listed
5. yarn redwood setup ui chakra-ui
6. yarn rw storybook

Storybook started okay for me without producing those errors you see. Are those steps I followed above the correct way to reproduce the issue on your local setup?

[jwvanderbeck]

Well between steps 5 and 6 there would have been where I initially installed the Storybook addon per the Chakra instructions, then ran storybook, got errors, then removed the addon, and tried again. So maybe that is what messed everything up. I can try to reproduce it when I get some free time but that would have essentially been:

5.1 yarn workspace web add -D @chakra-ui/storybook-addon
5.2 yarn rw storybook
5.3 Add configuration in web/config/storybook.config.js
5.4 errors
5.5 yarn workspace web remove @chakra-ui/storybook-addon and remove configuration added in 5.3
6 yarn rw storybook