storybook: [Bug]: string-width dependency stops storybook from executing

EDIT: Workaround described here: https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

Describe the bug

I am using Storybook 7 with the automatically generated vite-react setup.

When installing Storybook 7, yarn yields these dependency errors:

yarn install v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
[3/5] 🚚  Fetching packages...
warning Pattern ["string-width@^1.0.2 || 2 || 3 || 4"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.3"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.2.0"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.3"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["strip-ansi@^6.0.0"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.3"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width-cjs@npm:string-width@^4.2.0"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.3"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["wrap-ansi-cjs@npm:wrap-ansi@^7.0.0"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-wrap-ansi-cjs-7.0.0-67e145cff510a6a6984bdf1152911d69d2eb9e43-integrity/node_modules/wrap-ansi-cjs" as pattern ["wrap-ansi@^7.0.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.2.2"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.3"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.0.0"] is trying to unpack in the same destination "/Users/phil/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width@^4.2.3"]. This could result in non-deterministic behavior, skipping.
[4/5] 🔗  Linking dependencies...
warning "@storybook/addon-styling > css-loader@6.7.3" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > less-loader@11.1.0" has unmet peer dependency "less@^3.5.0 || ^4.0.0".
warning "@storybook/addon-styling > less-loader@11.1.0" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > postcss-loader@7.3.0" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > sass-loader@13.2.2" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > style-loader@3.3.2" has unmet peer dependency "webpack@^5.0.0".
[5/5] 🔨  Building fresh packages...
success Saved lockfile.
$ husky install
husky - Git hooks installed
✨  Done in 5.01s.

When running storybook, this error occurs:

/Users/phil/Projects/nextmission/node_modules/wide-align/align.js:2
var stringWidth = require('string-width')
                  ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/phil/Projects/nextmission/node_modules/string-width/index.js from /Users/phil/Projects/nextmission/node_modules/wide-align/align.js not supported.
Instead change the require of index.js in /Users/phil/Projects/FPV/nextmission/node_modules/wide-align/align.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/wide-align/align.js:2:19)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/gauge/render-template.js:2:13)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/gauge/plumbing.js:3:22)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/gauge/index.js:2:16)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/npmlog/log.js:3:13)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/@storybook/node-logger/dist/index.js:1:1141)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/@storybook/cli/dist/generate.js:1:1014)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/@storybook/cli/bin/index.js:9:1)
    at Object.<anonymous> (/Users/phil/Projects/nextmission/node_modules/storybook/index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.4.0

Just out of curiosity, I tried changing all require() calls of the listed node_modules files to import(), and after that i got the same error that is happening in #22430 :

❯ yarn dev:storybook
yarn run v1.22.19
$ storybook dev -p 6006
@storybook/cli v7.0.0

(node:55273) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
info => Starting manager..
✘ [ERROR] No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"

    node_modules/@storybook/preview-api/dist/chunk-6KOCOQSE.mjs:6:356:
      6 │ ... CURRENT_STORY_WAS_SET, PREVIEW_KEYDOWN, STORY_UNCHANGED, STORY_CHANGED, STORY_PREPARED, DOCS_PREPARED, STORY_MISSING, STORY_THREW_EXCEPTION, STORY_RENDER_PHASE_CHANGED, STORY_ERRORED, PLAY_...
        ╵                                                                                             ~~~~~~~~~~~~~

✘ [ERROR] No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"

    node_modules/@storybook/preview-api/dist/chunk-6KOCOQSE.mjs:6:356:
      6 │ ... CURRENT_STORY_WAS_SET, PREVIEW_KEYDOWN, STORY_UNCHANGED, STORY_CHANGED, STORY_PREPARED, DOCS_PREPARED, STORY_MISSING, STORY_THREW_EXCEPTION, STORY_RENDER_PHASE_CHANGED, STORY_ERRORED, PLAY_...
        ╵                                                                                             ~~~~~~~~~~~~~

ERR! Error: Build failed with 2 errors:
ERR! node_modules/@storybook/preview-api/dist/chunk-6KOCOQSE.mjs:6:356: ERROR: No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"
ERR! node_modules/@storybook/preview-api/dist/chunk-6KOCOQSE.mjs:6:356: ERROR: No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"
ERR!     at failureErrorWithLog (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1636:15)
ERR!     at /Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1048:25
ERR!     at runOnEndCallbacks (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1471:45)
ERR!     at buildResponseToResult (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1046:7)
ERR!     at /Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1075:16
ERR!     at responseCallbacks.<computed> (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:697:9)
ERR!     at handleIncomingPacket (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:752:9)
ERR!     at Socket.readFromStdout (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:673:7)
ERR!     at Socket.emit (node:events:537:28)
ERR!     at addChunk (node:internal/streams/readable:324:12)
ERR!  Error: Build failed with 2 errors:
ERR! node_modules/@storybook/preview-api/dist/chunk-6KOCOQSE.mjs:6:356: ERROR: No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"
ERR! node_modules/@storybook/preview-api/dist/chunk-6KOCOQSE.mjs:6:356: ERROR: No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"
ERR!     at failureErrorWithLog (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1636:15)
ERR!     at /Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1048:25
ERR!     at runOnEndCallbacks (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1471:45)
ERR!     at buildResponseToResult (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1046:7)
ERR!     at /Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:1075:16
ERR!     at responseCallbacks.<computed> (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:697:9)
ERR!     at handleIncomingPacket (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:752:9)
ERR!     at Socket.readFromStdout (/Users/phil/Projects/nextmission/node_modules/esbuild/lib/main.js:673:7)
ERR!     at Socket.emit (node:events:537:28)
ERR!     at addChunk (node:internal/streams/readable:324:12) {
ERR!   errors: [
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [],
ERR!       pluginName: '',
ERR!       text: 'No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"'
ERR!     },
ERR!     {
ERR!       detail: undefined,
ERR!       id: '',
ERR!       location: [Object],
ERR!       notes: [],
ERR!       pluginName: '',
ERR!       text: 'No matching export in "global-externals:@storybook/core-events" for import "DOCS_PREPARED"'
ERR!     }
ERR!   ],
ERR!   warnings: []
ERR! }

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

No response

System

Won't work because also npx fails with the same errors.

Additional context

I started off with storybook 7.0.8, and after uprading to 7.0.9 this happened. Now all versions have this behavior. I tried Node 16, 18 and 20, as well as clearing my yarn cache and deleting node_modules.

About this issue

Original URL
State: open
Created a year ago
Reactions: 88
Comments: 59 (9 by maintainers)

Links to this issue

javascript - Error: require() of ES modules is not supported when importing node-fetch - Stack Overflow

Commits related to this issue

Fix: bugs of deps - Yarn 1 has a bug with "string-width" (Ref. https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092) - MSW has a bug with logging system (Ref. https://github.... — committed to jetsbee/react-inspiring-bookmark by jetsbee a year ago
Switch to npm Due to this weird issue with yarn: https://github.com/storybookjs/storybook/issues/22431 — committed to Middlerun/cheeseburger-menu by Middlerun a year ago
https://github.com/storybookjs/storybook/issues/22431 — committed to a-ui/core_components_react by NicolasYapla a year ago
fix: Move Yarn to v3 to address ESM bug See: https://github.com/storybookjs/storybook/issues/22431 — committed to cfpb/design-system-react by contolini 10 months ago
fix: Move Yarn to v3 to address ESM bug See: https://github.com/storybookjs/storybook/issues/22431 — committed to cfpb/design-system-react by contolini 10 months ago
https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 — committed to OperationCode/front-end by kylemh 10 months ago
string-width esm bug fix https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 — committed to kamlekar/nestjs-starter by kamlekar 9 months ago
Pin jackspeak to 2.1.1 See https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 — committed to grafana/grafana-zabbix by zoltanbedi 9 months ago
fix: package hoisting issue (https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092) — committed to wesionaryTEAM/w-design by UjjwolKayastha 9 months ago
fix: rebuild yarn.lock As recommended in https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 rebuilding yarn.lock seems to fix the bug described in the ticket. As a side eff... — committed to demos-europe/demosplan-ui by spiess-demos 9 months ago
fix: rebuild yarn.lock (#572) As recommended in https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 rebuilding yarn.lock seems to fix the bug described in the ticket. As a... — committed to demos-europe/demosplan-ui by spiess-demos 9 months ago
🚑: Yarn の欠陥を修正 https://github.com/storybookjs/storybook/issues/22431 — committed to kufu/smarthr-patterns by uknmr 9 months ago
fix: lock dependency to omit string-width error A mysterious hoisting behavior leads to the ERR_REQUIRE_ESM error from the transitive dependency "string-width". A fix suggests to lock "jackspeak" to ... — committed to demos-europe/demosplan-ui by spiess-demos 8 months ago
fix: lock dependency to omit string-width error (#606) A mysterious hoisting behavior leads to the ERR_REQUIRE_ESM error from the transitive dependency "string-width". A fix suggests to lock "jacks... — committed to demos-europe/demosplan-ui by spiess-demos 8 months ago
Upgrade Storybook 6 to 7 * Upgrade version * Migrate Storybook main file * Migrate package.json's storybook scripts * Create babel config as SB6 had it, but SB7 does not have it, however it needs i... — committed to whereby/browser-sdk by nandito 8 months ago
:pushpin: Pin resolution Yarn v1 breaks apparently, workaround applied from: https://github.com/storybookjs/storybook/issues/22431\#issuecomment-1778435202 — committed to open-formulieren/open-forms-sdk by sergei-maertens 8 months ago
chore: use npm - yarn v1 has a bug https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 — committed to textlint-rule/textlint-rule-alex by azu 8 months ago
chore: use npm (#27) * chore: use npm - yarn v1 has a bug https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 * Update package.json * update — committed to textlint-rule/textlint-rule-alex by azu 8 months ago
build: add storybook accessibilty plugin add resolutions in package.json to fix `yarn storybook` error: https://github.com/storybookjs/storybook/issues/22431#issuecomment-16 300860 — committed to DanConwayDev/gitworkshop by DanConwayDev 9 months ago
fix(ui): fix storybook module resolution issue see https://github.com/storybookjs/storybook/issues/22431#issuecomment-1778435202 — committed to psychedelicious/InvokeAI by psychedelicious 7 months ago

Most upvoted comments

TLDR: the simplest solution here is to upgrade to Yarn 4. Yarn 1 is deprecated and I guess bugs like the below aren’t going to get fixed.

There is a workaround for Yarn 1 however, read on:

This is an instance of this issue: https://github.com/isaacs/jackspeak/issues/5, I guess technically a bug in yarn 1 – we had thought we resolved this with https://github.com/storybookjs/storybook/pull/23080 but I think it was the wrong approach.

It’s unclear what circumstances cause the bug to be triggered, it seems to just be which package yarn in its confusion hoists to the root node_modules.

Context:

It comes from the changes in this PR: https://github.com/yargs/cliui/pull/139 which are being debated in cliui
In the meantime jackspeak@2.1.2 has been updated to use the fork that breaks yarn1.
We only have that package as a transitive dep of glob which only depends on jackspeak@^2.0.3: https://github.com/isaacs/node-glob/blob/8c371a3eaacaa0783c34bda13d32fca3219017d3/package.json#L63C16-L63C16

So a simple workaround is to fix the resolution of jackspeak to 2.1.1:

  "resolutions": {
    "jackspeak": "2.1.1"
  }

You may need to delete yarn.lock also as yarn gets pretty confused.

Note we don’t really have any better solution because (a) Storybook can’t set the resolution field for you, and (b) glob (and therefore jackspeak) is a transitive dependency of quite a few of our dependencies, so we can’t even prebundle or depend on a specific “good” version.

+224

tmeasday on Mar 14, 2024

For those Mac users still using 1.22.19 you can upgrade yarn to the latest stable with:

yarn set version stable

I’ll note another workaround is to simply not use yarn 1 🤷

+44

jcwalker3 on Jul 21, 2023

I was encountering the same issue and below was the fix. Works without setting any resolutions

Set the stable yarn version
yarn set version stable
Reinstall the packages
yarn install

worked for me too. just when i was about to give up

+25

Katalyst33 on Dec 17, 2023

I have encountered similar problem multiple times. And I guess it’s likely a bug of yarn.

After deleting entries related to string-width in yarn.lock and yarn again, the problem gets fixed:

And name string-width-cjs is no longer there as well.

+22

vilicvane on May 31, 2023

try

clean cache
upgrade npm & yarn
remove lock* files (yarn | npm)
re-install packages

yarn cache clean --all

npm install -g npm@latest
npm install -g yarn@latest

rm node_modules/ yarn.lock package-lock.json

yarn

+18

floatrx on Aug 13, 2023

@NormySan I switched from yarn 1 to yarn 3, this also resolved it. very weird indeed.

+18

PhilippMolitor on May 11, 2023

So a simple workaround is to fix the resolution of jackspeak to 2.1.1:
  "resolutions": {
    "jackspeak": "2.1.1"
  }

@tmeasday this worked for me. Thanks!

+14

mikejoyceio on Aug 6, 2023

After deleting yarn.lock and running yarn, solve the error for me.

+10

ks-krimi on Oct 5, 2023

Solution that worked for me :

When I deleted the yarn.lock and ran yarn again, this was resolved

This doesn’t really solve the issue, if you do this and then push your code, the problem will still occur for other people using your code. If you stick with yarn 1, this workaround works really well :

So a simple workaround is to fix the resolution of jackspeak to 2.1.1:
  "resolutions": {
    "jackspeak": "2.1.1"
  }

+10

imPBH on Aug 25, 2023

const stringWidth = require(‘string-width’); ^

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\node_modules\string-width\index.js from C:\node_modules\cli-table3\src\utils.js not supported. Instead change the require of index.js in C:\node_modules\cli-table3\src\utils.js to a dynamic import() which is available in all CommonJS modules. at Object.<anonymous> (C:\node_modules\cli-table3\src\utils.js:1:21) at Object.<anonymous> (C:\node_modules\cli-table3\src\table.js:2:15) at Object.<anonymous> (C:\node_modules\cli-table3\index.js:1:18) at Object.<anonymous> (C:\node_modules@storybook\core-server\dist\index.js:113:8471) at Object.<anonymous> (C:\node_modules@storybook\cli\dist\generate.js:11:4494) at Object.<anonymous> (C:i\node_modules@storybook\cli\bin\index.js:9:1) at Object.<anonymous> (C:\node_modules\storybook\index.js:3:1) { code: ‘ERR_REQUIRE_ESM’ }

Node.js v18.16.0 error Command failed with exit code 1.

Solution that worked for me :

When I deleted the yarn.lock and ran yarn again, this was resolved

+10

eby-paul-daniel-codeglo on Aug 23, 2023

I’m also getting this error with Yarn, changing to pnpm solved it.

+10

NormySan on May 11, 2023

For yarn 1 users, this issue should be fixed by upgrading to yarn v1.22.22 or higher.

https://github.com/yarnpkg/yarn/releases/tag/v1.22.22

shadowspawn on Mar 9, 2024

I’ve faced this issue today! Struggle to find the root cause. Basically some transient dependency was updating string-width to v5. I had to add a yarn resolution to cli-truncate@2.1.0 in order to pin string-width to v4,

estevaolucas on May 11, 2023

TLDR: the simplest solution here is to upgrade to Yarn 3. Yarn 1 is deprecated and I guess bugs like the below aren’t going to get fixed.

Where is it documented that Yarn 1 is deprecated? And no, upgrading to Yarn 3 is most definitely not the “simplest” solution.

jordan-bite on Feb 2, 2024

I was encountering this error and went through the following steps:

Storybook 7.4.0
Next 12
Yarn 1.22.19
Node 18.17.1

Install the Storybook CLI globally if you haven’t already, using yarn:
```
yarn global add @storybook/cli
```
or using npm:
```
npm install -g @storybook/cli
```
Run the command to initialize Storybook in your project. This will create or recreate an initial configuration and set up the Storybook structure in your project:
```
getstorybook init
```
Add these scripts to your package.json file to start Storybook. Open your project’s package.json file and add the appropriate scripts. For example:
```
"scripts": {
  "storybook": "start-storybook -p 6006",
  "build-storybook": "build-storybook"
}
```

…and also, for yarn ‘resolutions’ or for npm ‘overrides’:

  "resolutions": {
    "string-width": "^4",
    "jackspeak": "^2",
    "strip-ansi": "^6"
  }

zeroskullx on Oct 25, 2023

I tried on MacOS the resolutions approach (still with yarn 1.22.19) and it just decreased the warnings, from [image1] to [image2]. It only worked after removing the local cached files

Though upgrading yarn (yarn set version stable), mentioned by @tmeasday and emphasized by @jcwalker3, made it work smoothly 🎉

marcoarruda on Jul 22, 2023

Everything was working until string-width v5.0.1 was added to yarn.lock, after then I get: Error [ERR_REQUIRE_ESM]: require() of ES Module <path>/node_modules/string-width/index.js If I add name string-width to v4.2.3 then it works. As workaround I use NPM, which adds the name and then yarn import to generate yarn.lock, since my pipeline is all based in yarn.

Sitting-Duck351 on Jun 28, 2023

Anyone experiencing this with bun in a monorepo?

SutuSebastian on Mar 19, 2024

Run:
yarn set version stable && yarn install 

After:
Restart VScode(Editor)

abdul-megadraws on Jan 5, 2024

I was encountering the same issue and below was the fix. Works without setting any resolutions

Set the stable yarn version

yarn set version stable

Reinstall the packages

yarn install

sheldon-welinga on Nov 30, 2023

ok, so maybe some kind of information in the installation docs or better error handling? It took me now an hour to try to debug and run it

dzienisz on Aug 23, 2023

Also experiencing this error, storybook version 7.0.9, node version v16.14.0, yarn version 1.22.19

samends on Jun 23, 2023

@bacvietswiss

After deleting yarn.lock and running yarn, solve the error for me.

This works for me, but it’s really annoying since I need to delete yarn.lock all the time before running storybook

The better workaround for Yarn Classic (v1) is in https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092

Add the following to package.json

  "resolutions": {
    "jackspeak": "2.1.1"
  }

The problem is resolved by updating from Yarn Classic (v1) to Yarn Modern (v3).

MikeMcC399 on Oct 22, 2023

in my case this error still exists within a npm + lerna monorepo, not sure what triggers it tho

yyyyaaa on Mar 14, 2024

@sibelius I think https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092 still applies. Perhaps there is now some sign that yarn 1 might eventually fix the problem, but in the meantime, there is a workaround in the comment and migrating to yarn 4 is still my recommendation if possible.

tmeasday on Mar 13, 2024

@bacvietswiss

After deleting yarn.lock and running yarn, solve the error for me.

This works for me, but it’s really annoying since I need to delete yarn.lock all the time before running storybook

The better workaround for Yarn Classic (v1) is in #22431 (comment)

Add the following to package.json
  "resolutions": {
    "jackspeak": "2.1.1"
  }
The problem is resolved by updating from Yarn Classic (v1) to Yarn Modern (v3).

It works for me and when I use bun

Alex20180512 on Nov 9, 2023

I was encountering this error and went through the following steps:

* Storybook 7.4.0

* Next 12

* Yarn 1.22.19

* Node 18.17.1


1. Install the Storybook CLI globally if you haven't already, using yarn:
   ```
   yarn global add @storybook/cli
   ```
   
   
       
         
       
   
         
       
   
       
     
   or using npm:
   ```
   npm install -g @storybook/cli
   ```

2. Run the command to initialize Storybook in your project. This will create or recreate an initial configuration and set up the Storybook structure in your project:
   ```
   getstorybook init
   ```

3. Add these scripts to your package.json file to start Storybook. Open your project's package.json file and add the appropriate scripts. For example:
   ```
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   }
   ```

…and also, for yarn ‘resolutions’ or for npm ‘overrides’:

  "resolutions": {
    "string-width": "^4",
    "jackspeak": "^2",
    "strip-ansi": "^6"
  }

This works! thanks 🙏🏼

qridwan on Oct 25, 2023

Have been facing this issue for a few months on a project now (was preventing us from upgrading beyond StoryBook@7.0.27).

Just resolved it by finding this thread, and subsequently upgrading to Yarn 3.

This issue link was provided when yarn failed in a CI/CD pipeline in Azure. The migration to Yarn 3 was extremely simple and fast (pleasant surprise) and it resolved the issue both locally and in our pipelines. Thanks for everyone’s efforts in getting the info out there, much appreciated! 💖

Wolven531 on Oct 3, 2023

upgrade Yarn , run npm install --global yarn , delete node modules and yarn.lock and then run yarn again

ahmed-khlifi on Oct 1, 2023

@dzienisz

Yarn Classic (version 1) is frozen, so to get the correct fix I believe you need to update to Yarn Modern (currently version 3). If you can’t update, then the workaround in https://github.com/storybookjs/storybook/issues/22431#issuecomment-1666914443 seems to be the best option.

MikeMcC399 on Aug 23, 2023