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.

Sign up for GitHub

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

Jump to bottom

Yarn 2 strict pnp: @storybook/components missing dependency on regenerator-runtime #13830

Closed
Xerkus opened this issue Feb 6, 2021 · 5 comments
Closed

Yarn 2 strict pnp: @storybook/components missing dependency on regenerator-runtime #13830

Xerkus opened this issue Feb 6, 2021 · 5 comments
Assignees
@gaetanmaisse
Labels
components dependencies yarn / npm Yarn / npm acting weird

Comments

@Xerkus
Copy link

Xerkus commented Feb 6, 2021

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Default storybook for react install in yarn 2 workspaces with strict pnp linker.

Yarn Workspaces difference is that pnp fallback forcebly disabled, same can be achieved in regular yarn package with yarn config set pnpFallbackMode none

Run yarn workspace storybook start, build fails with:

Module not found: Error: @storybook/components tried to access regenerator-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Expected behavior
Storybook builds and starts dev server

Screenshots

Code snippets
Adding regenerator-runtime as peer dependency fixes the error.

# .yarnrc.yml
packageExtensions:
  "@storybook/components@6.1.17":
    peerDependencies:
      regenerator-runtime: ">=0.11.1"

System

$ yarn dlx sb@next info

Environment Info:

System:
OS: Linux 5.10 Fedora 33 (Workstation Edition) 33 (Workstation Edition)
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 14.15.4 - /tmp/xfs-2274736b/node
Yarn: 2.4.0 - /tmp/xfs-2274736b/yarn
npm: 6.14.10 - /usr/bin/npm
Browsers:
Chrome: 88.0.4324.150
Firefox: 85.0

yarn info -A -R --dependents --virtuals @storybook/components
├─ @storybook/components@npm:6.1.17
│ ├─ Instances: 1
│ ├─ Version: 6.1.17
│ │
│ ├─ Dependents
│ │ ├─ @storybook/addon-actions@npm:6.1.17
│ │ ├─ @storybook/addon-backgrounds@npm:6.1.17
│ │ ├─ @storybook/addon-controls@npm:6.1.17
│ │ ├─ @storybook/addon-docs@npm:6.1.17
│ │ ├─ @storybook/addon-toolbars@npm:6.1.17
│ │ ├─ @storybook/addon-viewport@npm:6.1.17
│ │ ├─ @storybook/core@npm:6.1.17
│ │ └─ @storybook/ui@npm:6.1.17
│ │
│ └─ Dependencies
│ ├─ @popperjs/core@npm:^2.5.4 → npm:2.6.0
│ ├─ @storybook/client-logger@npm:6.1.17 → npm:6.1.17
│ ├─ @storybook/csf@npm:0.0.1 → npm:0.0.1
│ ├─ @storybook/theming@npm:6.1.17 → npm:6.1.17
│ ├─ @types/overlayscrollbars@npm:^1.9.0 → npm:1.12.0
│ ├─ @types/react-color@npm:^3.0.1 → npm:3.0.4
│ ├─ @types/react-syntax-highlighter@npm:11.0.4 → npm:11.0.4
│ ├─ core-js@npm:^3.0.1 → npm:3.8.3
│ ├─ fast-deep-equal@npm:^3.1.1 → npm:3.1.3
│ ├─ global@npm:^4.3.2 → npm:4.4.0
│ ├─ lodash@npm:^4.17.15 → npm:4.17.20
│ ├─ markdown-to-jsx@npm:^6.11.4 → npm:6.11.4
│ ├─ memoizerific@npm:^1.11.3 → npm:1.11.3
│ ├─ overlayscrollbars@npm:^1.10.2 → npm:1.13.1
│ ├─ polished@npm:^3.4.4 → npm:3.6.7
│ ├─ react-color@npm:^2.17.0 → npm:2.19.3
│ ├─ react-popper-tooltip@npm:^3.1.1 → npm:3.1.1
│ ├─ react-syntax-highlighter@npm:^13.5.0 → npm:13.5.3
│ ├─ react-textarea-autosize@npm:^8.1.1 → npm:8.3.0
│ └─ ts-dedent@npm:^2.0.0 → npm:2.0.0
│
└─ @storybook/components@npm:6.1.17 [22ebd]
├─ Version: 6.1.17
│
├─ Dependents
│ ├─ @storybook/addon-actions@npm:6.1.17 [edd76]
│ ├─ @storybook/addon-backgrounds@npm:6.1.17 [dfc29]
│ ├─ @storybook/addon-controls@npm:6.1.17 [dfc29]
│ ├─ @storybook/addon-docs@npm:6.1.17 [edd76]
│ ├─ @storybook/addon-toolbars@npm:6.1.17 [dfc29]
│ ├─ @storybook/addon-viewport@npm:6.1.17 [dfc29]
│ ├─ @storybook/core@npm:6.1.17 [50077]
│ └─ @storybook/ui@npm:6.1.17 [aa913]
│
└─ Peer dependencies
├─ @types/react-dom@* → ✘
├─ @types/react@* → ✘
├─ react-dom@^16.8.0 || ^17.0.0 → npm:17.0.1 [edd76]
└─ react@^16.8.0 || ^17.0.0 → npm:17.0.1

Additional context
This is general issue exposed by yarn 2 being very strict with undeclared dependencies usage.
@arcanis
Copy link
Contributor

arcanis commented Feb 9, 2021

A regular dep would probably make more sense - basically the problem here is that when @storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js is generated it contains references to regenerator-runtime, thus making it a hard dependency of the package.

@shilman shilman added the P2 label Feb 15, 2021
@gaetanmaisse gaetanmaisse mentioned this issue Feb 15, 2021
Merged
@shilman
Copy link
Member

shilman commented Feb 17, 2021

Yowza!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.29 containing PR #13916 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed Feb 17, 2021
@gaetanmaisse gaetanmaisse mentioned this issue Feb 21, 2021
Merged
@shilman
Copy link
Member

shilman commented Feb 23, 2021

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.19 containing PR #13991 that references this issue. Upgrade today to the @latest NPM tag to try it out!

npx sb upgrade

@acusti
Copy link
Contributor

acusti commented Jun 18, 2021

i’m still seeing this error using yarn 2 (actually v3.0.0-rc.5, but v3 is just a continuation, rather than a massive change like v1 to v2) and storybook v6.3.0-rc.11. i’m directly depending on:

    "devDependencies": {
        "@storybook/addon-actions": "^6.3.0-rc.11",
        "@storybook/addon-docs": "^6.3.0-rc.11",
        "@storybook/addon-essentials": "^6.3.0-rc.11",
        "@storybook/addon-links": "^6.3.0-rc.11",
        "@storybook/addons": "^6.3.0-rc.11",
        "@storybook/react": "^6.3.0-rc.11",
    }

i started seeing the error in my builds after i added a .storybook/manager.js file with the following contents (the storybook keyboard shortcuts were interfering with testing keyboard navigation in my components):

import { addons } from '@storybook/addons';

addons.setConfig({
    enableShortcuts: false,
});

the error logs look like:

8:03:28 AM: ERR! => Failed to build the manager
8:03:28 AM: ERR! Module not found: Error: @storybook/addon-toolbars tried to access regenerator-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
ERR!
8:03:28 AM: ERR! Required package: regenerator-runtime (via "regenerator-runtime/runtime.js")
8:03:28 AM: ERR! Required by: @storybook/addon-toolbars@virtual:a618fadbe95d42c5f4f251fa21aa877d1b0c9fd1aaaa0591b4f69956e188d9bd4b96b38687423c5fe8a967c6f60b021b7215038c2c153eb121e56ef819adb204#npm:6.3.0-rc.11 (via /opt/build/repo/.yarn/__virtual__/@storybook-addon-toolbars-virtual-c8d724d631/0/cache/@storybook-addon-toolbars-npm-6.3.0-rc.11-679b02ca5a-d4e7a0cc1a.zip/node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js)
Full logs from 4 lines above ERR! to end (very repetitive but in case it’s helpful) 
8:03:28 AM: <s> [webpack.Progress] 69% building 1276/1294 modules 18 active /opt/build/repo/.yarn/cache/doctrine-npm-3.0.0-c6f1615f04-fd7673ca77.zip/node_modules/doctrine/lib/typed.js
8:03:28 AM: <s> [webpack.Progress] 69% building 1276/1295 modules 19 active /opt/build/repo/.yarn/cache/doctrine-npm-3.0.0-c6f1615f04-fd7673ca77.zip/node_modules/doctrine/lib/utility.js
8:03:28 AM: <s> [webpack.Progress] 69% building 1277/1295 modules 18 active /opt/build/repo/.yarn/cache/doctrine-npm-3.0.0-c6f1615f04-fd7673ca77.zip/node_modules/doctrine/lib/utility.js
8:03:28 AM: <s> [webpack.Progress] 69% building 1277/1296 modules 19 active /opt/build/repo/.yarn/__virtual__/babel-loader-virtual-004569f5fc/0/cache/babel-loader-npm-8.2.2-b4e600c2c5-df5092ef98.zip/node_modules/babel-loader/lib/index.js??ref--4-0!/opt/build/repo/.yarn/__virtual__/@acusti-styling-virtual-daf73669da/1/packages/styling/dist/Style.js
8:03:28 AM: ERR! => Failed to build the manager
8:03:28 AM: ERR! Module not found: Error: @storybook/addon-toolbars tried to access regenerator-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
ERR!
8:03:28 AM: ERR! Required package: regenerator-runtime (via "regenerator-runtime/runtime.js")
8:03:28 AM: ERR! Required by: @storybook/addon-toolbars@virtual:a618fadbe95d42c5f4f251fa21aa877d1b0c9fd1aaaa0591b4f69956e188d9bd4b96b38687423c5fe8a967c6f60b021b7215038c2c153eb121e56ef819adb204#npm:6.3.0-rc.11 (via /opt/build/repo/.yarn/__virtual__/@storybook-addon-toolbars-virtual-c8d724d631/0/cache/@storybook-addon-toolbars-npm-6.3.0-rc.11-679b02ca5a-d4e7a0cc1a.zip/node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js)
8:03:28 AM: ERR!
8:03:28 AM: ERR! ModuleNotFoundError: Module not found: Error: @storybook/addon-toolbars tried to access regenerator-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
ERR!
8:03:28 AM: ERR! Required package: regenerator-runtime (via "regenerator-runtime/runtime.js")
8:03:28 AM: ERR! Required by: @storybook/addon-toolbars@virtual:a618fadbe95d42c5f4f251fa21aa877d1b0c9fd1aaaa0591b4f69956e188d9bd4b96b38687423c5fe8a967c6f60b021b7215038c2c153eb121e56ef819adb204#npm:6.3.0-rc.11 (via /opt/build/repo/.yarn/__virtual__/@storybook-addon-toolbars-virtual-c8d724d631/0/cache/@storybook-addon-toolbars-npm-6.3.0-rc.11-679b02ca5a-d4e7a0cc1a.zip/node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js)
8:03:28 AM: ERR!
8:03:28 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/Compilation.js:925:10
8:03:28 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:401:22
8:03:28 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:130:21
8:03:28 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:224:22
8:03:28 AM: ERR!     at /opt/build/repo/.yarn/cache/neo-async-npm-2.6.2-75d6902586-deac9f8d00.zip/node_modules/neo-async/async.js:2830:7
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/neo-async-npm-2.6.2-75d6902586-deac9f8d00.zip/node_modules/neo-async/async.js:6877:13
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:214:25
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:207:23
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:283:21
8:03:29 AM: ERR!     at eval (eval at create (/opt/build/repo/.yarn/cache/tapable-npm-1.1.3-f1c2843426-53ff4e7c39.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:42:23
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:283:21
8:03:29 AM: ERR!     at eval (eval at create (/opt/build/repo/.yarn/cache/tapable-npm-1.1.3-f1c2843426-53ff4e7c39.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:283:21
8:03:29 AM: ERR!     at eval (eval at create (/opt/build/repo/.yarn/cache/tapable-npm-1.1.3-f1c2843426-53ff4e7c39.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:64:26
8:03:29 AM: ERR!  ModuleNotFoundError: Module not found: Error: @storybook/addon-toolbars tried to access regenerator-runtime, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
ERR!
8:03:29 AM: ERR! Required package: regenerator-runtime (via "regenerator-runtime/runtime.js")
8:03:29 AM: ERR! Required by: @storybook/addon-toolbars@virtual:a618fadbe95d42c5f4f251fa21aa877d1b0c9fd1aaaa0591b4f69956e188d9bd4b96b38687423c5fe8a967c6f60b021b7215038c2c153eb121e56ef819adb204#npm:6.3.0-rc.11 (via /opt/build/repo/.yarn/__virtual__/@storybook-addon-toolbars-virtual-c8d724d631/0/cache/@storybook-addon-toolbars-npm-6.3.0-rc.11-679b02ca5a-d4e7a0cc1a.zip/node_modules/@storybook/addon-toolbars/dist/esm/utils/register-shortcuts.js)
8:03:29 AM: ERR!
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/Compilation.js:925:10
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:401:22
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:130:21
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:224:22
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/neo-async-npm-2.6.2-75d6902586-deac9f8d00.zip/node_modules/neo-async/async.js:2830:7
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/neo-async-npm-2.6.2-75d6902586-deac9f8d00.zip/node_modules/neo-async/async.js:6877:13
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/__virtual__/webpack-virtual-a4ee16b43e/0/cache/webpack-npm-4.46.0-a8158cfa7f-013fa24c00.zip/node_modules/webpack/lib/NormalModuleFactory.js:214:25
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:207:23
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:283:21
8:03:29 AM: ERR!     at eval (eval at create (/opt/build/repo/.yarn/cache/tapable-npm-1.1.3-f1c2843426-53ff4e7c39.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:42:23
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:283:21
8:03:29 AM: ERR!     at eval (eval at create (/opt/build/repo/.yarn/cache/tapable-npm-1.1.3-f1c2843426-53ff4e7c39.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/Resolver.js:283:21
8:03:29 AM: ERR!     at eval (eval at create (/opt/build/repo/.yarn/cache/tapable-npm-1.1.3-f1c2843426-53ff4e7c39.zip/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:22:1)
8:03:29 AM: ERR!     at /opt/build/repo/.yarn/cache/enhanced-resolve-npm-4.5.0-1bcc7900d2-4d87488584.zip/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:64:26

@gaetanmaisse gaetanmaisse mentioned this issue Jun 21, 2021
Merged
@shilman
Copy link
Member

shilman commented Jun 23, 2021

Zoinks!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.3.0-rc.12 containing PR #15312 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@gaetanmaisse gaetanmaisse

Labels
components dependencies yarn / npm Yarn / npm acting weird
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@shilman @acusti @Xerkus @arcanis @gaetanmaisse