search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.4k stars 9.28k forks source link

@storybook/addon-actions@npm:6.5.0-alpha.64 causes configuration error #17996

Open rally25rs opened 2 years ago

rally25rs commented 2 years ago

Describe the bug Adding @storybook/addon-actions@npm:6.5.0-alpha.64 to the addons in the configuration results in an error.

To Reproduce

package.json deps (next is currently 6.5.0-alpha.64):

    "@storybook/addon-actions": "next",
    "@storybook/addon-controls": "next",
    "@storybook/addon-docs": "next",
    "@storybook/addon-links": "next",
    "@storybook/addons": "next",
    "@storybook/api": "next",
    "@storybook/builder-webpack5": "next",
    "@storybook/components": "next",
    "@storybook/core-events": "next",
    "@storybook/manager-webpack5": "next",

main.js:


module.exports = {
  core: {
    builder: "webpack5",
  },

  features: {
    previewMdx2: true,
  },

  stories: ['./*.stories.js', './stories/*.stories.js', '../../**/*.stories.(js|ts|tsx)'],
  addons: ['@storybook/addon-docs', '@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-controls'],
};

run command:

yarn run start-storybook

results in error:

info => Loading presets
ERR! TypeError: (intermediate value) is not iterable
ERR!     at _default (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-builder-webpack5-virtual-f6bab782af/0/cache/@storybook-builder-webpack5-npm-6.5.0-alpha.64-6b61656f32-8eefb6f4eb.zip/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js:70:22)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async starterGeneratorFn (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-builder-webpack5-virtual-f6bab782af/0/cache/@storybook-builder-webpack5-npm-6.5.0-alpha.64-6b61656f32-8eefb6f4eb.zip/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-builder-webpack5-virtual-f6bab782af/0/cache/@storybook-builder-webpack5-npm-6.5.0-alpha.64-6b61656f32-8eefb6f4eb.zip/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-core-server-virtual-66e8f1bae6/0/cache/@storybook-core-server-npm-6.5.0-alpha.64-3829db92dd-a417498b98.zip/node_modules/@storybook/core-server/dist/cjs/dev-server.js:139:28)
ERR!     at async buildDevStandalone (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-core-server-virtual-66e8f1bae6/0/cache/@storybook-core-server-npm-6.5.0-alpha.64-3829db92dd-a417498b98.zip/node_modules/@storybook/core-server/dist/cjs/build-dev.js:118:31)
ERR!     at async buildDev (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-core-server-virtual-66e8f1bae6/0/cache/@storybook-core-server-npm-6.5.0-alpha.64-3829db92dd-a417498b98.zip/node_modules/@storybook/core-server/dist/cjs/build-dev.js:164:5)
ERR!  TypeError: (intermediate value) is not iterable
ERR!     at _default (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-builder-webpack5-virtual-f6bab782af/0/cache/@storybook-builder-webpack5-npm-6.5.0-alpha.64-6b61656f32-8eefb6f4eb.zip/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js:70:22)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async starterGeneratorFn (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-builder-webpack5-virtual-f6bab782af/0/cache/@storybook-builder-webpack5-npm-6.5.0-alpha.64-6b61656f32-8eefb6f4eb.zip/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-builder-webpack5-virtual-f6bab782af/0/cache/@storybook-builder-webpack5-npm-6.5.0-alpha.64-6b61656f32-8eefb6f4eb.zip/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-core-server-virtual-66e8f1bae6/0/cache/@storybook-core-server-npm-6.5.0-alpha.64-3829db92dd-a417498b98.zip/node_modules/@storybook/core-server/dist/cjs/dev-server.js:139:28)
ERR!     at async buildDevStandalone (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-core-server-virtual-66e8f1bae6/0/cache/@storybook-core-server-npm-6.5.0-alpha.64-3829db92dd-a417498b98.zip/node_modules/@storybook/core-server/dist/cjs/build-dev.js:118:31)
ERR!     at async buildDev (/Users/jvalore/Projects/mindful-ui/.yarn/__virtual__/@storybook-core-server-virtual-66e8f1bae6/0/cache/@storybook-core-server-npm-6.5.0-alpha.64-3829db92dd-a417498b98.zip/node_modules/@storybook/core-server/dist/cjs/build-dev.js:164:5)

Removing @storybook/addon-actions from the addons array fixes the error.

System

  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 3.2.0 - ~/.yarn/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.88
    Firefox: 98.0.2
    Safari: 13.1.3

Additional context Add any other context about the problem here.

buggedcom commented 2 years ago

I'm also getting the exact same issue with 6.3.8 too and webpack 4

ERR! TypeError: (intermediate value) is not iterable
ERR!     at _default (xxxx/build/.yarn/$$virtual/@storybook-builder-webpack4-virtual-058dc2c569/0/cache/@storybook-builder-webpack4-npm-6.4.20-5e50c2b126-de8f34a022.zip/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:73:22)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:93:5)
ERR!     at async Object.build (xxxx/build/.yarn/$$virtual/@storybook-builder-webpack4-virtual-058dc2c569/0/cache/@storybook-builder-webpack4-npm-6.4.20-5e50c2b126-de8f34a022.zip/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:174:16)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (xxxx/build/.yarn/$$virtual/@storybook-core-server-virtual-c0615d1f70/0/cache/@storybook-core-server-npm-6.4.20-d148a2ac09-f049532226.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR!     at async buildStatic (xxxx/build/.yarn/$$virtual/@storybook-core-server-virtual-c0615d1f70/0/cache/@storybook-core-server-npm-6.4.20-d148a2ac09-f049532226.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
ERR!  TypeError: (intermediate value) is not iterable
ERR!     at _default (xxxx/build/.yarn/$$virtual/@storybook-builder-webpack4-virtual-058dc2c569/0/cache/@storybook-builder-webpack4-npm-6.4.20-5e50c2b126-de8f34a022.zip/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:73:22)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:93:5)
ERR!     at async Object.build (xxxx/build/.yarn/$$virtual/@storybook-builder-webpack4-virtual-058dc2c569/0/cache/@storybook-builder-webpack4-npm-6.4.20-5e50c2b126-de8f34a022.zip/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:174:16)
ERR!     at async Promise.all (index 1)
ERR!     at async buildStaticStandalone (xxxx/build/.yarn/$$virtual/@storybook-core-server-virtual-c0615d1f70/0/cache/@storybook-core-server-npm-6.4.20-d148a2ac09-f049532226.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js:175:28)
ERR!     at async buildStatic (xxxx/build/.yarn/$$virtual/@storybook-core-server-virtual-c0615d1f70/0/cache/@storybook-core-server-npm-6.4.20-d148a2ac09-f049532226.zip/node_modules/@storybook/core-server/dist/cjs/build-static.js:195:5)
o
havenchyk commented 2 years ago

More details:

started failing at 6.5.0-alpha.53 of addon-essential (actions is included to it).

Logs

ERR! TypeError: (intermediate value) is not iterable
ERR!     at _default (/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js:70:22)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!     at async starterGeneratorFn (/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR!     at async buildDevStandalone (/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
ERR!  TypeError: (intermediate value) is not iterable
ERR!     at _default (/node_modules/@storybook/builder-webpack5/dist/cjs/preview/iframe-webpack.config.js:70:22)
ERR!     at processTicksAndRejections (internal/process/task_queues.js:95:5)
ERR!     at async starterGeneratorFn (/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:116:16)
ERR!     at async Object.start (/node_modules/@storybook/builder-webpack5/dist/cjs/index.js:272:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR!     at async buildDevStandalone (/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/node_modules/@storybook/react/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
buggedcom commented 2 years ago

This seems to be stemming from when the presets returned from this https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack5/src/preview/iframe-webpack.config.ts#L79

returns an empty object {} instead of an empty array

nbelzer commented 2 years ago

Had the same issue pop up here when upgrading from 6.4.22 to 6.5.4. While we took some time to dive into the storybook code to try and figure out what is causing it, we were not able to figure out the exact cause.

The reason the issue popped up for us seems to be related to @storybook/addon-essentials and @storybook/addon-actions, as you can see based on our findings below:

We tried several configurations, the following failed:

module.exports = {
  stories: [ ... ],
  addons: ['@storybook/addon-essentials'],
}

The following configurations worked:

module.exports = {
  stories: [ ... ],
  addons: [{
    name: '@storybook/addon-essentials',
    options: {
      'actions': false,
    }
  }],
}
module.exports = {
  stories: [ ... ],
  addons: ['@storybook/addon-actions', '@storybook/addon-essentials'],
}
module.exports = {
  stories: [ ... ],
  addons: ['@storybook/addon-docs', '@storybook/addon-controls', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-viewport', '@storybook/addon-toolbars', '@storybook/addon-measure', '@storybook/addon-outline'],
}

Because we were able to load every add-on separately without issue we believe the issue might be related to how @storybook/addon-essentials includes the add-ons compared to how this is handled when the add-ons are specified separately.

System information

  System:
    OS: macOS 12.3.1
  Binaries:
    Node: 16.14.0
    Yarn: 1.22.17
    npm: 8.3.1
MH4GF commented 2 years ago

thanks to @nbelzer , I also solved the problem by explicitly adding @storybook/addon-actions to the addon.

ref: https://github.com/MH4GF/log.mh4gf.dev/pull/190/files

Since this is a public project, I'll also post the chromatic build error log for reference. https://github.com/MH4GF/log.mh4gf.dev/runs/6584246090?check_suite_focus=true

shilman commented 2 years ago

@MH4GF can you please share how to reproduce in your project? would be useful to have a repro as we do a proper fix

MH4GF commented 2 years ago

@shilman Can be reproduced in this PR and branch. https://github.com/MH4GF/log.mh4gf.dev/pull/191

bobbonius commented 2 years ago

Hey,

Today I wanted to upgrade @storybook/addon-essentials to 6.5.7 and stumbled upon the same error in our project: 

$ start-storybook -p 9001 -c .storybook
info @storybook/react v6.4.22
info
info => Loading presets
ERR! TypeError: (intermediate value) is not iterable
ERR!     at _default (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:73:22)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async Object.start (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:91:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR!     at async buildDevStandalone (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)
ERR!  TypeError: (intermediate value) is not iterable
ERR!     at _default (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/builder-webpack4/dist/cjs/preview/iframe-webpack.config.js:73:22)
ERR!     at processTicksAndRejections (node:internal/process/task_queues:96:5)
ERR!     at async Object.start (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/builder-webpack4/dist/cjs/index.js:91:16)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/core-server/dist/cjs/dev-server.js:126:28)
ERR!     at async buildDevStandalone (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/core-server/dist/cjs/build-dev.js:115:31)
ERR!     at async buildDev (/Users/bobmuller/dev/ticketswap/solar/node_modules/@storybook/core-server/dist/cjs/build-dev.js:161:5)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.

Steps to reproduce:

  1. Clone Solar
  2. Checkout PR-1490 branch: dependabot/npm_and_yarn/storybook/addon-essentials-6.5.7
  3. yarn && yarn storybook

I'm on node: 16.13.0 and yarn 1.22.19 macOS Monterey 12.1 (21C52)

tmeasday commented 2 years ago

@MH4GF I think your issue is the unusual way you have your SB dependencies listed:

https://github.com/MH4GF/log.mh4gf.dev/blob/915cb711d0ae9f81b1e372f589ab86a219704691/package.json#L50-L57

If you look in yarn.lock you'll see the end result of all this is different versions of various SB packages installed.

@bobbonius you cannot update a single storybook package, we publish all versions of each package and expect them to stay in sync.

The TLDR is this problem is caused by conflicting versions of various SB packages. @shilman we should add something to the CLI to check for this situation and complain loudly :)

bobbonius commented 2 years ago

@tmeasday thank you! Worked out now 🎉

yannickrocks commented 2 years ago

@tmeasday thank you! Worked out now 🎉

how did you solve this?

JulioC commented 2 years ago

@yannickrocks the workaround appears to be adding the affected addon manually before essentials:

module.exports = {
  stories: [ ... ],
  addons: ['@storybook/addon-actions', '@storybook/addon-essentials'],
}
HosseinAgha commented 2 years ago

I couldn't see my @storybook/essentials addons in the storybook when I added them one-by-one.
After commenting everything and adding only the @storybook/addon-actions I encountered this error.

So this does not work for me (storybook builds successfully but no addon will be visible)

module.exports = {
  addons: [
    '@storybook/addon-actions'
    '@storybook/addon-docs'
    '@storybook/addon-viewport',
    '@storybook/addon-controls',
    '@storybook/addon-toolbars',
    '@storybook/addon-measure',
    '@storybook/addon-outline',
  ]
}

This works for me:

module.exports = {
  addons: [
    '@storybook/addon-essentials',
  ]
}

Adding any addon before essentials makes that addon hidden in UI!! Again with no errors.
So here the '@storybook/addon-viewport' button will get hidden in toolbar.

module.exports = {
  addons: [
    '@storybook/addon-viewport'
    '@storybook/addon-essentials',
  ]
}

I'm using yarn 3 and pnp. My issue also looks like https://github.com/storybookjs/storybook/issues/8383.

iscomandev commented 2 years ago

Maybe my method can fix someone's problem.

Before:

{
   "xx": {
      "@storybook/addon-actions": "^6.4.13",
      "@storybook/addon-essentials": "^6.4.13",
      "@storybook/addon-links": "^6.4.13",
      "@storybook/vue": "^6.4.13",
   }
}

Actually in node_modules，I found package version is 6.15.X . So I limit the semantic version like this.

After

{
   "xx": {
      "@storybook/addon-actions": "~6.4.13",
      "@storybook/addon-essentials": "~6.4.13",
      "@storybook/addon-links": "~6.4.13",
      "@storybook/vue": "~6.4.13",
   }
}

Then npm install again.

This way work for my problem.

MathRivest commented 1 year ago

I had the same problem and after messing around I found that adding /register after the addon-action worked for me. Without it, I kept getting the TypeError: (intermediate value) is not iterable error

{
  addons: [
      '@storybook/addon-knobs',
      '@storybook/addon-actions/register',
      '@storybook/addon-notes',
      '@storybook/addon-storysource',
  ],
}