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

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 > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > [email protected]" has unmet peer dependency "less@^3.5.0 || ^4.0.0".
warning "@storybook/addon-styling > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning "@storybook/addon-styling > [email protected]" 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.

May 06 '23 12:05 PhilippMolitor

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

May 11 '23 13:05 NormySan

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

May 11 '23 16:05 PhilippMolitor

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 [email protected] in order to pin string-width to v4,

May 11 '23 21:05 estevaolucas

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.

May 31 '23 19:05 vilicvane

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

Jun 23 '23 20:06 samends

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.

Jun 28 '23 15:06 Sitting-Duck351

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 [email protected] 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.

Jul 11 '23 04:07 tmeasday

@estevaolucas [email protected] fixed the issue, but now there is a new similar issue. can you help me out-

Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\gurkirat.singh\Desktop\engine-dashboard\node_modules\wrap-ansi\index.js from C:\Users\gurkirat.singh\Desktop\engine-dashboard\node_modules\cliui\build\index.cjs not supported. Instead change the require of index.js in C:\Users\gurkirat.singh\Desktop\engine-dashboard\node_modules\cliui\build\index.cjs to a dynamic import() which is available in all CommonJS modules.

Jul 20 '23 13:07 gurkiratkn

@gurkiratkn -- did you try the resolution I suggested?

Jul 21 '23 00:07 tmeasday

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 🤷

Jul 21 '23 07:07 jcwalker3

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 🎉

Jul 22 '23 15:07 marcoarruda

Possibly this relates to Yarn Classic issue https://github.com/yarnpkg/yarn/issues/4812, fixed in Yarn Modern.

Jul 26 '23 14:07 MikeMcC399

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!

Aug 06 '23 16:08 mikejoyceio

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

Aug 13 '23 17:08 floatrx

The issue occurs every time so I don't think that any temporary solution is right.

I have Mac with Yarn 1.XX.XX when I install Storybook through NPX comand it run and the end. Problem occur when I want to yarn storybook my myself.

Aug 23 '23 13:08 dzienisz

@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.

Aug 23 '23 13:08 MikeMcC399

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

Aug 23 '23 13:08 dzienisz

@dzienisz

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

I sympathize as I also spent quite a few hours on this issue!

Aug 23 '23 13:08 MikeMcC399

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. (C:\node_modules\cli-table3\src\utils.js:1:21) at Object. (C:\node_modules\cli-table3\src\table.js:2:15) at Object. (C:\node_modules\cli-table3\index.js:1:18) at Object. (C:\node_modules@storybook\core-server\dist\index.js:113:8471) at Object. (C:\node_modules@storybook\cli\dist\generate.js:11:4494) at Object. (C:i\node_modules@storybook\cli\bin\index.js:9:1) at Object. (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

Aug 23 '23 21:08 eby-paul-daniel-codeglo

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"
  }

Aug 25 '23 14:08 imPBH

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

Oct 01 '23 22:10 ahmed-khlifi

Have been facing this issue for a few months on a project now (was preventing us from upgrading beyond [email protected]).

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! 💖

Oct 03 '23 16:10 Wolven531

Thanks for the feedback folks. I updated my comment above to further emphasise that upgrading to yarn 3 is the preferred solution.

Ideally SB itself would catch the above error and link folks to this issue; however as it happens at require time, I don't think that's easy to do at our end--if any one figures out how, a PR to do that would be much appreciated!

Oct 04 '23 03:10 tmeasday

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

Oct 05 '23 12:10 ks-krimi

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

worked!

Oct 13 '23 10:10 akshayjai1

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

Oct 22 '23 07:10 bacvietswiss

@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).

Oct 22 '23 07:10 MikeMcC399

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"
  }

Oct 25 '23 03:10 zeroskullx

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 🙏🏼

Oct 25 '23 13:10 qridwan

hey guys, having the same issue where running into an error when trying to install storybook. Error code 'ERR_REQUIRE_SEM'. node v 18.18. Yarn version 1.22.19. Anyone facing this problem?

Nov 08 '23 13:11 michelarteta

storybook storybook copied to clipboard

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

Describe the bug

To Reproduce

System

Additional context

storybook
storybook copied to clipboard