Repository: storybook
Issue: [Bug]: string-width dependency stops storybook from executing
Labels: bug,dependencies,has workaround

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

```shell
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.