storybook icon indicating copy to clipboard operation
storybook copied to clipboard

Published 20 hours ago • verified publisher icon storybookjs

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

Open rally25rs opened this issue 2 years ago • 14 comments

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.

rally25rs avatar Apr 18 '22 16:04 rally25rs

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

buggedcom avatar Apr 19 '22 05:04 buggedcom

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)

havenchyk avatar Apr 19 '22 13:04 havenchyk

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

buggedcom avatar Apr 20 '22 08:04 buggedcom

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

nbelzer avatar May 23 '22 15:05 nbelzer

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

MH4GF avatar May 27 '22 01:05 MH4GF

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

shilman avatar May 27 '22 03:05 shilman

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

MH4GF avatar May 27 '22 04:05 MH4GF

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)

bobbonius avatar Jun 07 '22 09:06 bobbonius

@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 :)

tmeasday avatar Jun 21 '22 00:06 tmeasday

@tmeasday thank you! Worked out now 🎉

bobbonius avatar Jun 27 '22 08:06 bobbonius

@tmeasday thank you! Worked out now 🎉

how did you solve this?

yannickrocks avatar Jul 11 '22 07:07 yannickrocks

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

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

JulioC avatar Jul 11 '22 15:07 JulioC

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.

HosseinAgha avatar Jul 25 '22 08:07 HosseinAgha

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.

iscomandev avatar Sep 13 '22 10:09 iscomandev

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',
  ],
}

MathRivest avatar Nov 01 '22 15:11 MathRivest