Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
PhilippMolitor opened this issue May 6, 2023 · 62 comments
Open

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

PhilippMolitor opened this issue May 6, 2023 · 62 comments

Comments

@PhilippMolitor
Copy link

PhilippMolitor commented May 6, 2023

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.

@PhilippMolitor PhilippMolitor changed the title [Bug]: [Bug]: string-width dependency stops storybook from executing May 6, 2023
@NormySan
Copy link

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

@PhilippMolitor
Copy link
Author

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

@estevaolucas
Copy link

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
Copy link

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:

image

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

@samends
Copy link

samends commented Jun 23, 2023

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

@Sitting-Duck351
Copy link

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
Copy link
Member

tmeasday commented Jul 11, 2023

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:

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.

@gurkiratkn
Copy link

@estevaolucas
cli-truncate@2.1.0 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.

@tmeasday
Copy link
Member

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

@jcwalker3
Copy link

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 🤷

@shadowspawn
Copy link

To be clear @jacklaurencegaray , you need to regenerate the yarn.lock file to clear the error from older version of yarn. (You may have done the, but just making sure.)

@tmeasday
Copy link
Member

@shadowspawn have you seen it work? I tried with a brand new project on yarn 1.22.22 and continued to see the original problem. As I said, I don't think the yarn 1 issue is actually fixed, although the change you pointed to does seem like a step in the right direction.

I'll point out as I mentioned way back:

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.

So it's not impossible the issue was "fixed" for you just by chance, as an aside.

@shadowspawn
Copy link

shadowspawn commented Mar 25, 2024

@tmeasday I saw the same hoisting problem fixed, but it was in a different project.

So it's not impossible the issue was "fixed" for you just by chance, as an aside.

I did have a reproducible failure which went away when I used the new version of yarn, so I thought it was good. I commented here because this issue was linked. But maybe I was just lucky or trigger conditions changed but not fully fixed, as you say.

Sorry I may have offered false hope. 😢

@tmeasday
Copy link
Member

Hard to say for sure without analyzing node_modules (and remembering the exact form of the problem) but I'm going to guess given my and @jacklaurencegaray's experience that this is the case 😞

@dindustack
Copy link

Anyone experiencing this with bun in a monorepo?

Just had a weird error with bun that pointed me to this issue. Deleting the node_modules folder and running bun update fixed it for me. 🤷

This worked for me!!! Thanks

@marcotas
Copy link

Deleting the node_modules folder also worked for me with pnpm.

@pozda
Copy link

pozda commented Apr 26, 2024

TL;DR: - install SB8 with npm and then switch back to yarn (works with yarn 1.22.22)

unusual solution helped in my case:

  • removed node_modules
  • removed yarn.lock
  • removed storybook and all those storybook add-ons (keep the list somewhere) from package.json
  • run npx storybook@latest init
  • install back the add-ons, install packages that are listed in console error
  • try running it with yarn
  • when successful, delete the package_lock.json, node_modules
  • run yarn with empty yarn.lock file
  • profit

daniellockyer added a commit to TryGhost/Ghost that referenced this issue May 9, 2024
fixes #20065
refs storybookjs/storybook#22431 (comment)
refs isaacs/jackspeak#5

- this adds a resolution for jackspeak, which is a dependency deep
  inside storybook
- somewhere deep in the dependency tree, we're requiring an ESM
  package from a CJS package, which is causing issues
- this should hopefully avoid that by pinning jackspeak to a working version
daniellockyer added a commit to TryGhost/Ghost that referenced this issue May 9, 2024
fixes #20065
refs storybookjs/storybook#22431 (comment)
refs isaacs/jackspeak#5

- this adds a resolution for jackspeak, which is a dependency deep
  inside storybook
- somewhere deep in the dependency tree, we're requiring an ESM
  package from a CJS package, which is causing issues
- this should hopefully avoid that by pinning jackspeak to a working version
@ljhyeok
Copy link

ljhyeok commented May 23, 2024

@pozda thanks a lot! It works for me

@qfdk
Copy link

qfdk commented Jun 3, 2024

Hello all,

I found a solution and would like to share how to resolve it:

  1. Don;t need to delete yarn.lock, use the latest version of yarn (1.22.22)
  2. Run yarn why string-width to find the library that uses it as a dependency.
  3. Downgrade this library to the version that works, remove node_modules, and then run yarn install to verify it works.
  4. Use yarn upgrade lib@version to upgrade only this library.

It should work.

Happy coding!

2024-06-03

@chessmadridista
Copy link

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

This solution worked for me. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests