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.

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

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

Open
rally25rs opened this issue Apr 18, 2022 · 15 comments
Open

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

rally25rs opened this issue Apr 18, 2022 · 15 comments

Comments

@rally25rs
Copy link

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
Copy link

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
Copy link

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
Copy link

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
Copy link

nbelzer commented May 23, 2022

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 added a commit to MH4GF/log.mh4gf.dev that referenced this issue May 27, 2022
@MH4GF
Copy link

MH4GF commented May 27, 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

@shilman
Copy link
Member

shilman commented May 27, 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

@MH4GF
Copy link

MH4GF commented May 27, 2022

@shilman Can be reproduced in this PR and branch.
MH4GF/log.mh4gf.dev#191

@bobbonius
Copy link

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
Copy link
Member

tmeasday commented Jun 21, 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 :)

@bobbonius
Copy link

@tmeasday thank you! Worked out now 🎉

@yannickrocks
Copy link

@tmeasday thank you! Worked out now 🎉

how did you solve this?

@JulioC
Copy link
Contributor

JulioC commented Jul 11, 2022

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

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

@HosseinAgha
Copy link

HosseinAgha commented Jul 25, 2022

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 #8383.

@iscomandev
Copy link

iscomandev commented Sep 13, 2022

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
Copy link

MathRivest commented Nov 1, 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',
  ],
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests