[Bug?]: Storybook does not work

[nandumoura]

What's not working?

When running the yarn rw sb command, the storybook installation breaks when the CLI installation starts

the folowwing error

➜   yarn rw sb
Initializing the Mock Service Worker at "/home/archn/Projects/Redwood/my-redwood-project-test-storybook/web/public"...

Service Worker successfully created!
/home/archn/Projects/Redwood/my-redwood-project-test-storybook/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

info => Serving static files from /home/archn/Projects/Redwood/my-redwood-project-test-storybook/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-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-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-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] 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-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-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-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: 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/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:1649:15)
    at /home/archn/Projects/Redwood/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:1058:25
    at runOnEndCallbacks (/home/archn/Projects/Redwood/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:1484:45)
    at buildResponseToResult (/home/archn/Projects/Redwood/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:1056:7)
    at /home/archn/Projects/Redwood/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:1085:16
    at responseCallbacks.<computed> (/home/archn/Projects/Redwood/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (/home/archn/Projects/Redwood/my-redwood-project-test-storybook/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/home/archn/Projects/Redwood/my-redwood-project-test-storybook/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/my-redwood-project-test-storybook/node_modules/@redwoodjs/testing/config/storybook" --webpack-stats-json --port 7910 --no-version-updates

How do we reproduce the bug?

yarn rw sb or yarn redwood storybook

What's your environment? (If it applies)

System:
    OS: Linux 6.7 undefined
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - /tmp/xfs-4de4cd27/node
    Yarn: 4.1.1 - /tmp/xfs-4de4cd27/yarn
  Databases:
    SQLite: 3.42.0 - /home/linuxbrew/.linuxbrew/bin/sqlite3
  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 @nandumoura 👋

I am having a little trouble reproducing this locally. I followed the following steps:

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

Storybook was able to successfully download and start for me.

Some information that could be helpful is:

1. which yarn to hint to us if yarn is coming from corepack
2. yarn config which will print out a whole bunch of stuff but I think maybe the values of yarnPath and nodeLinker could be useful to confirm we are seeing what we'd expect to see

[nandumoura]

which yarn
/home/archn/.nvm/versions/node/v20.11.1/bin/yarn
I try another versions of node too like v20.1.0

yarn config
├─ cacheFolder
│ ├─ Description: Folder where the cache files must be written
│ ├─ Source:
│ └─ Value: '/home/archn/.yarn/berry/cache'
│
├─ cacheMigrationMode
│ ├─ Description: Defines the conditions under which Yarn upgrades should cause the cache archives to be regenerated.
│ ├─ Source:
│ └─ Value: 'always'
│
├─ changesetBaseRefs
│ ├─ Description: The base git refs that the current HEAD is compared against when detecting changes. Supports git branches, tags, and commits.
│ ├─ Source:
│ └─ Value: [ 'master', 'origin/master', ... 4 more items ]
│
├─ changesetIgnorePatterns
│ ├─ Description: Array of glob patterns; files matching them will be ignored when fetching the changed files
│ ├─ Source:
│ └─ Value: []
│
├─ checksumBehavior
│ ├─ Description: Enumeration defining what to do when a checksum doesn't match expectations
│ ├─ Source:
│ └─ Value: 'throw'
│
├─ cloneConcurrency
│ ├─ Description: Maximal number of concurrent clones
│ ├─ Source:
│ └─ Value: 2
│
├─ compressionLevel
│ ├─ Description: Zip files compression level, from 0 to 9 or mixed (a variant of 9, which stores some files uncompressed, when compression doesn't yield good results)
│ ├─ Source: /home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarnrc.yml
│ └─ Value: 0
│
├─ constraintsPath
│ ├─ Description: The path of the constraints file.
│ ├─ Source:
│ └─ Value: '/home/archn/Projects/Redwood/my-redwood-project-test-storybook/constraints.pro'
│
├─ defaultLanguageName
│ ├─ Description: Default language mode that should be used when a package doesn't offer any insight
│ ├─ Source:
│ └─ Value: 'node'
│
├─ defaultProtocol
│ ├─ Description: Default resolution protocol used when resolving pure semver and tag ranges
│ ├─ Source:
│ └─ Value: 'npm:'
│
├─ defaultSemverRangePrefix
│ ├─ Description: The default save prefix: '^', '~' or ''
│ ├─ Source:
│ └─ Value: '^'
│
├─ deferredVersionFolder
│ ├─ Description: Folder where are stored the versioning files
│ ├─ Source:
│ └─ Value: '/home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarn/versions'
│
├─ enableColors
│ ├─ Description: If true, the CLI is allowed to use colors in its output
│ ├─ Source:
│ └─ Value: true
│
├─ enableConstraintsChecks
│ ├─ Description: If true, constraints will run during installs
│ ├─ Source:
│ └─ Value: false
│
├─ enableGlobalCache
│ ├─ Description: If true, the system-wide cache folder will be used regardless of cache-folder
│ ├─ Source: /home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarnrc.yml
│ └─ Value: true
│
├─ enableHardenedMode
│ ├─ Description: If true, automatically enable --check-resolutions --refresh-lockfile on installs
│ ├─ Source:
│ └─ Value: null
│
├─ enableHyperlinks
│ ├─ Description: If true, the CLI is allowed to use hyperlinks in its output
│ ├─ Source:
│ └─ Value: true
│
├─ enableImmutableCache
│ ├─ Description: If true, the cache is reputed immutable and actions that would modify it will throw
│ ├─ Source:
│ └─ Value: false
│
├─ enableImmutableInstalls
│ ├─ Description: If true (the default on CI), prevents the install command from modifying the lockfile
│ ├─ Source:
│ └─ Value: false
│
├─ enableInlineBuilds
│ ├─ Description: If true, the CLI will print the build output on the command line
│ ├─ Source:
│ └─ Value: false
│
├─ enableInlineHunks
│ ├─ Description: If true, the installs will print unmatched patch hunks
│ ├─ Source:
│ └─ Value: false
│
├─ enableMessageNames
│ ├─ Description: If true, the CLI will prefix most messages with codes suitable for search engines
│ ├─ Source:
│ └─ Value: true
│
├─ enableMirror
│ ├─ Description: If true, the downloaded packages will be retrieved and stored in both the local and global folders
│ ├─ Source:
│ └─ Value: true
│
├─ enableNetwork
│ ├─ Description: If false, Yarn will refuse to use the network if required to
│ ├─ Source:
│ └─ Value: true
│
├─ enableOfflineMode
│ ├─ Description: If true, Yarn will attempt to retrieve files and metadata from the global cache rather than the network
│ ├─ Source:
│ └─ Value: false
│
├─ enableProgressBars
│ ├─ Description: If true, the CLI is allowed to show a progress bar for long-running events
│ ├─ Source:
│ └─ Value: true
│
├─ enableScripts
│ ├─ Description: If true, packages are allowed to have install scripts by default
│ ├─ Source:
│ └─ Value: true
│
├─ enableStrictSettings
│ ├─ Description: If true, unknown settings will cause Yarn to abort
│ ├─ Source:
│ └─ Value: true
│
├─ enableStrictSsl
│ ├─ Description: If false, SSL certificate errors will be ignored
│ ├─ Source:
│ └─ Value: true
│
├─ enableTelemetry
│ ├─ Description: If true, telemetry will be periodically sent, following the rules in https://yarnpkg.com/advanced/telemetry
│ ├─ Source:
│ └─ Value: true
│
├─ enableTimers
│ ├─ Description: If true, the CLI is allowed to print the time spent executing commands
│ ├─ Source:
│ └─ Value: true
│
├─ enableTips
│ ├─ Description: If true, installs will print a helpful message every day of the week
│ ├─ Source:
│ └─ Value: true
│
├─ enableTransparentWorkspaces
│ ├─ Description: If false, Yarn won't automatically resolve workspace dependencies unless they use the workspace: protocol
│ ├─ Source:
│ └─ Value: true
│
├─ globalFolder
│ ├─ Description: Folder where all system-global files are stored
│ ├─ Source:
│ └─ Value: '/home/archn/.yarn/berry'
│
├─ httpProxy
│ ├─ Description: URL of the http proxy that must be used for outgoing http requests
│ ├─ Source:
│ └─ Value: null
│
├─ httpRetry
│ ├─ Description: Retry times on http failure
│ ├─ Source:
│ └─ Value: 3
│
├─ httpTimeout
│ ├─ Description: Timeout of each http request in milliseconds
│ ├─ Source:
│ └─ Value: 60000
│
├─ httpsCaFilePath
│ ├─ Description: A path to a file containing one or multiple Certificate Authority signing certificates
│ ├─ Source:
│ └─ Value: null
│
├─ httpsCertFilePath
│ ├─ Description: Path to file containing certificate chain in PEM format
│ ├─ Source:
│ └─ Value: null
│
├─ httpsKeyFilePath
│ ├─ Description: Path to file containing private key in PEM format
│ ├─ Source:
│ └─ Value: null
│
├─ httpsProxy
│ ├─ Description: URL of the http proxy that must be used for outgoing https requests
│ ├─ Source:
│ └─ Value: null
│
├─ ignorePath
│ ├─ Description: If true, the local executable will be ignored when using the global one
│ ├─ Source:
│ └─ Value: false
│
├─ immutablePatterns
│ ├─ Description: Array of glob patterns; files matching them won't be allowed to change during immutable installs
│ ├─ Source:
│ └─ Value: []
│
├─ initEditorConfig
│ ├─ Description: Extra rules to define in the generator editorconfig
│ ├─ Source:
│ └─ Value: undefined
│
├─ initFields
│ ├─ Description: Additional fields to set when creating packages via the init command
│ ├─ Source:
│ └─ Value: undefined
│
├─ initScope
│ ├─ Description: Scope used when creating packages via the init command
│ ├─ Source:
│ └─ Value: null
│
├─ injectEnvironmentFiles
│ ├─ Description: List of all the environment files that Yarn should inject inside the process when it starts
│ ├─ Source:
│ └─ Value: [ '.env.yarn?' ]
│
├─ installStatePath
│ ├─ Description: Path of the file where the install state will be persisted
│ ├─ Source:
│ └─ Value: '/home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarn/install-state.gz'
│
├─ lastUpdateCheck
│ ├─ Description: Last timestamp we checked whether new Yarn versions were available
│ ├─ Source:
│ └─ Value: null
│
├─ logFilters
│ ├─ Description: Overrides for log levels
│ ├─ Source:
│ └─ Value: []
│
├─ networkConcurrency
│ ├─ Description: Maximal number of concurrent requests
│ ├─ Source:
│ └─ Value: 50
│
├─ networkSettings
│ ├─ Description: Network settings per hostname (glob patterns are supported)
│ ├─ Source:
│ └─ Value: undefined
│
├─ nmHoistingLimits
│ ├─ Description: Prevents packages to be hoisted past specific levels
│ ├─ Source:
│ └─ Value: 'none'
│
├─ nmMode
│ ├─ Description: Defines in which measure Yarn must use hardlinks and symlinks when generated node_modules directories.
│ ├─ Source: /home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarnrc.yml
│ └─ Value: 'hardlinks-local'
│
├─ nmSelfReferences
│ ├─ Description: Defines whether the linker should generate self-referencing symlinks for workspaces.
│ ├─ Source:
│ └─ Value: true
│
├─ nodeLinker
│ ├─ Description: The linker used for installing Node packages, one of: "pnp", "pnpm", or "node-modules"
│ ├─ Source: /home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarnrc.yml
│ └─ Value: 'node-modules'
│
├─ npmAlwaysAuth
│ ├─ Description: URL of the selected npm registry (note: npm enterprise isn't supported)
│ ├─ Source:
│ └─ Value: false
│
├─ npmAuditExcludePackages
│ ├─ Description: Array of glob patterns of packages to exclude from npm audit
│ ├─ Source:
│ └─ Value: []
│
├─ npmAuditIgnoreAdvisories
│ ├─ Description: Array of glob patterns of advisory IDs to exclude from npm audit
│ ├─ Source:
│ └─ Value: []
│
├─ npmAuditRegistry
│ ├─ Description: Registry to query for audit reports
│ ├─ Source:
│ └─ Value: null
│
├─ npmAuthIdent
│ ├─ Description: Authentication identity for the npm registry (_auth in npm and yarn v1)
│ ├─ Source:
│ └─ Value: null
│
├─ npmAuthToken
│ ├─ Description: Authentication token for the npm registry (_authToken in npm and yarn v1)
│ ├─ Source:
│ └─ Value: null
│
├─ npmPublishAccess
│ ├─ Description: Default access of the published packages
│ ├─ Source:
│ └─ Value: null
│
├─ npmPublishRegistry
│ ├─ Description: Registry to push packages to
│ ├─ Source:
│ └─ Value: null
│
├─ npmRegistries
│ ├─ Description: Settings per registry
│ ├─ Source:
│ └─ Value: undefined
│
├─ npmRegistryServer
│ ├─ Description: URL of the selected npm registry (note: npm enterprise isn't supported)
│ ├─ Source:
│ └─ Value: 'https://registry.yarnpkg.com'
│
├─ npmScopes
│ ├─ Description: Settings per package scope
│ ├─ Source:
│ └─ Value: undefined
│
├─ packageExtensions
│ ├─ Description: Map of package corrections to apply on the dependency tree
│ ├─ Source:
│ └─ Value: undefined
│
├─ patchFolder
│ ├─ Description: Folder where the patch files must be written
│ ├─ Source:
│ └─ Value: '/home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarn/patches'
│
├─ pnpEnableEsmLoader
│ ├─ Description: If true, Yarn will generate an ESM loader (.pnp.loader.mjs). If this is not explicitly set Yarn tries to automatically detect whether ESM support is required.
│ ├─ Source:
│ └─ Value: false
│
├─ pnpEnableInlining
│ ├─ Description: If true, the PnP data will be inlined along with the generated loader
│ ├─ Source:
│ └─ Value: true
│
├─ pnpFallbackMode
│ ├─ Description: If true, the generated PnP loader will follow the top-level fallback rule
│ ├─ Source:
│ └─ Value: 'dependencies-only'
│
├─ pnpIgnorePatterns
│ ├─ Description: Array of glob patterns; files matching them will use the classic resolution
│ ├─ Source:
│ └─ Value: []
│
├─ pnpMode
│ ├─ Description: If 'strict', generates standard PnP maps. If 'loose', merges them with the n_m resolution.
│ ├─ Source:
│ └─ Value: 'strict'
│
├─ pnpShebang
│ ├─ Description: String to prepend to the generated PnP script
│ ├─ Source:
│ └─ Value: '#!/usr/bin/env node'
│
├─ pnpUnpluggedFolder
│ ├─ Description: Folder where the unplugged packages must be stored
│ ├─ Source:
│ └─ Value: '/home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarn/unplugged'
│
├─ preferDeferredVersions
│ ├─ Description: If true, running yarn version will assume the --deferred flag unless --immediate is set
│ ├─ Source:
│ └─ Value: false
│
├─ preferInteractive
│ ├─ Description: If true, the CLI will automatically use the interactive mode when called from a TTY
│ ├─ Source:
│ └─ Value: false
│
├─ preferReuse
│ ├─ Description: If true, yarn add will attempt to reuse the most common dependency range in other workspaces.
│ ├─ Source:
│ └─ Value: false
│
├─ preferTruncatedLines
│ ├─ Description: If true, the CLI will truncate lines that would go beyond the size of the terminal
│ ├─ Source:
│ └─ Value: false
│
├─ progressBarStyle
│ ├─ Description: Which style of progress bar should be used (only when progress bars are enabled)
│ ├─ Source:
│ └─ Value: undefined
│
├─ rcFilename
│ ├─ Description: Name of the files where the configuration can be found
│ ├─ Source:
│ └─ Value: '.yarnrc.yml'
│
├─ supportedArchitectures
│ ├─ Description: Architectures that Yarn will fetch and inject into the resolver
│ ├─ Source:
│ ├─ os: [ 'current' ]
│ ├─ cpu: [ 'current' ]
│ └─ libc: [ 'current' ]
│
├─ taskPoolConcurrency
│ ├─ Description: Maximal amount of concurrent heavy task processing
│ ├─ Source:
│ └─ Value: 8
│
├─ taskPoolMode
│ ├─ Description: Execution strategy for heavy tasks
│ ├─ Source:
│ └─ Value: 'workers'
│
├─ telemetryInterval
│ ├─ Description: Minimal amount of time between two telemetry uploads, in days
│ ├─ Source:
│ └─ Value: 7
│
├─ telemetryUserId
│ ├─ Description: If you desire to tell us which project you are, you can set this field. Completely optional and opt-in.
│ ├─ Source:
│ └─ Value: null
│
├─ tsEnableAutoTypes
│ ├─ Description: Whether Yarn should auto-install @types/ dependencies on 'yarn add'
│ ├─ Source:
│ └─ Value: null
│
├─ unsafeHttpWhitelist
│ ├─ Description: List of the hostnames for which http queries are allowed (glob patterns are supported)
│ ├─ Source:
│ └─ Value: []
│
├─ virtualFolder
│ ├─ Description: Folder where the virtual packages (cf doc) will be mapped on the disk (must be named virtual)
│ ├─ Source:
│ └─ Value: '/home/archn/Projects/Redwood/my-redwood-project-test-storybook/.yarn/virtual'
│
├─ winLinkType
│ ├─ Description: Whether Yarn should use Windows Junctions or symlinks when creating links on Windows.
│ ├─ Source:
│ └─ Value: 'junctions'
│
└─ yarnPath
├─ Description: Path to the local executable that must be used over the global one
├─ Source: /home/archn/.yarnrc.yml
└─ Value: '/home/archn/.yarn/releases/yarn-4.1.1.cjs'

[jcianca]

I'm also getting this error as I'm going through the tutorial. I figured I maybe did something wrong so I started a new app:

yarn create redwood-app sbtest1
cd sbtest1
yarn install
yarn rw storybook

And I get this:

`Installing plugin "@redwoodjs/cli-storybook"...
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @redwoodjs/cli-storybook@npm:7.4.1, @aw-web-design/x-default-browser@npm:1.4.126, @base2/pretty-print-object@npm:1.0.1, and 267 more.
➤ YN0000: └ Completed in 2s 715ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 1s 900ms
➤ YN0000: ┌ Link step
➤ YN0008: │ esbuild@npm:0.20.2 must be rebuilt because its dependency tree changed
➤ YN0008: │ msw@npm:1.3.3 [916d6] must be rebuilt because its dependency tree changed
➤ YN0008: │ esbuild@npm:0.18.20 must be rebuilt because its dependency tree changed
➤ YN0007: │ @swc/core@npm:1.4.14 [5d271] must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 8s 130ms
➤ YN0000: · Done in 13s 289ms
➤ YN0000: ┌ Deduplication step
➤ YN0000: │ No packages can be deduped using the highest strategy
➤ YN0000: └ Completed in 0s 322ms
➤ YN0000: · Yarn 4.1.1
➤ YN0000: ┌ Resolution step
➤ YN0000: └ Completed in 0s 431ms
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed in 1s 684ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 1s 193ms
➤ YN0000: · Done in 3s 788ms
Initializing the Mock Service Worker at "/Users/cianca/Documents/sbtest/sbtest1/web/public"...

Service Worker successfully created!
/Users/cianca/Documents/sbtest/sbtest1/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

info => Serving static files from /Users/cianca/Documents/sbtest/sbtest1/web/public at /
info => Starting manager..
WARN No story files found for the specified pattern: src/**/*.stories.@(js|jsx|ts|tsx|mdx)
WARN unable to find package.json for vitest
✘ [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-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-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-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-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-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-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/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:1649:15)
    at /Users/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:1058:25
    at runOnEndCallbacks (/Users/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:1484:45)
    at buildResponseToResult (/Users/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:1056:7)
    at /Users/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:1085:16
    at responseCallbacks.<computed> (/Users/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:703:9)
    at handleIncomingPacket (/Users/cianca/Documents/sbtest/sbtest1/node_modules/esbuild/lib/main.js:762:9)
    at Socket.readFromStdout (/Users/cianca/Documents/sbtest/sbtest1/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.`

System:
OS: macOS 14.0
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.12.0 - /private/var/folders/8c/st4fqgxj5nv0fn8yjz4xdvhw0000gn/T/xfs-b28c8d8c/node
Yarn: 4.1.1 - /private/var/folders/8c/st4fqgxj5nv0fn8yjz4xdvhw0000gn/T/xfs-b28c8d8c/yarn
Databases:
SQLite: 3.39.5 - /usr/bin/sqlite3
Browsers:
Chrome: 123.0.6312.122
Safari: 17.0
npmPackages:
@redwoodjs/cli-storybook: 7.4.1 => 7.4.1
@redwoodjs/core: 7.4.1 => 7.4.1
@redwoodjs/project-config: 7.4.1 => 7.4.1

which yarn
/usr/local/bin/yarn

yarn config

├─ nodeLinker
│  ├─ Description: The linker used for installing Node packages, one of: "pnp", "pnpm", or "node-modules"
│  ├─ Source: /Users/cianca/Documents/sbtest/sbtest1/.yarnrc.yml
│  └─ Value: 'node-modules'

└─ yarnPath
   ├─ Description: Path to the local executable that must be used over the global one
   ├─ Source: <default>
   └─ Value: null

[jcianca]

So I finally got storybook working:

I discovered I had a (hidden) file ".pnp.cjs" in a parent folder. For me I was working in /Users/cianca/Documents/sbtest
and the .pnp.cjs file was in /Users/cianca. I deleted this (and some other yarn junk from that same folder) and storybook worked.

Hope this helps anyone who made a similar mistake.