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

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.

About this issue

  • Original URL
  • State: open
  • Created 2 years ago
  • Reactions: 10
  • Comments: 15 (3 by maintainers)

Commits related to this issue

Most upvoted comments

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
+24
nbelzer on May 23, 2022

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

module.exports = {
  stories: [ ... ],
  addons: ['@storybook/addon-actions', '@storybook/addon-essentials'],
}
+16
JulioC on Jul 11, 2022

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

+2
MH4GF on May 27, 2022

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',
  ],
}
+1
MathRivest on Nov 1, 2022

@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 😃

+1
tmeasday on Jun 21, 2022

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

+1
shilman on May 27, 2022
Read more comments on GitHub
← react-native: `@storybook/addon-actions` & `@storybook/addon-ondevice-actions` are not working
storybook: TypeError: Cannot read property 'NormalModule' of undefined →