"Issues integrating Storybook with RedwoodJS - Dependency resolution errors

Question

I follow this steps in this tutorial https://redwoodjs.com/docs/tutorial/chapter5/storybook

clone this repo https://github.com/redwoodjs/redwood-tutorial and then use the redwood command to use storybook with redwood yarn rw storybook

I receive this error

`@storybook/cli v7.6.17

info => Serving static files from /home/archn/Projects/Redwood/tutorial/redwood-tutorial/web/public at /
info => Starting manager..
✘ [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-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-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-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-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-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-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-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 (/home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:1649:15)
at /home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:1058:25
at runOnEndCallbacks (/home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:1484:45)
at buildResponseToResult (/home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:1056:7)
at /home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:1085:16
at responseCallbacks. (/home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:703:9)
at handleIncomingPacket (/home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/esbuild/lib/main.js:762:9)
at Socket.readFromStdout (/home/archn/Projects/Redwood/tutorial/redwood-tutorial/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.

Command failed with exit code 1: yarn storybook dev --config-dir "/home/archn/Projects/Redwood/tutorial/redwood-tutorial/node_modules/@redwoodjs/testing/config/storybook" --webpack-stats-json --port 7910 --no-version-updates`

I try clean cache from yarn but dont solve anyone know how to solve this?

To Reproduce

clone this repo https://github.com/redwoodjs/redwood-tutorial

git clone https://github.com/redwoodjs/redwood-tutorial
cd redwood-tutorial
yarn install
yarn rw prisma migrate dev
yarn rw g secret

copy this secret gerated and add to .env file as SESSION_SECRET

and then use the redwood command to use storybook with redwood yarn rw storybook

I hope I can solve the problem

Answer 1

it may seem strange, but I solved it by deleting the .pnp.cjs file from my home directory, that's assuming you're on mac