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

[PhilippMolitor]

EDIT: Workaround described here: #22431 (comment)

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.

[NormySan]

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

[PhilippMolitor]

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

[estevaolucas]

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,

[vilicvane]

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.

[samends]

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

[Sitting-Duck351]

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.

[tmeasday]

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: isaacs/jackspeak#5, I guess technically a bug in yarn 1 -- we had thought we resolved this with #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: fix: handle strings the same in cjs, esm, and deno yargs/cliui#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.