Search code examples
reactjsstorybook

storybook @storybook/addon-options dosent work

I am trying to set some option but it doesn't work.

package.json 

  "devDependencies": {
    "@storybook/addon-actions": "^3.4.10",
    "@storybook/addon-links": "^3.4.10",
    "@storybook/addon-options": "^3.4.11",
    "@storybook/addon-storyshots": "^3.4.10",
    "@storybook/addons": "^3.4.10",
    "@storybook/react": "^3.4.11"
}

addons.js 

import '@storybook/addon-options/register';

config.js

import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';

setOptions({ name: 'my name' });

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/);

function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module);

I am trying to understand where i s, going wrong for a few hours.

Solution

  • Edit after testing with provided versions:

    I tested this locally with the above versions, and what it looks like is that because @storybook/react and @storybook/addons are on different versions, even by a patch, @storybook/react ends up installing it's own addons dependency and the 2 become out of sync.

    If this is the case, you will likely see an error like "accessing nonexistent addons channel" in the console.

    To fix this you will need to increase the version of the addons dependency to v3.4.11 AND reinstall the react dependency.

    npm install --save-dev @storybook/[email protected] @storybook/[email protected]

    Note: If you only update addons to v3.4.11 without reinstalling the react dependency, it won't fully sync up, because the react would already have installed it's own addon subdependency.

    An image of the filesystem within node_modules directoy:

    enter image description here

    Previously Answered for Storybook v4:

    According to the documentation, you have to apply the settings as a decorator (and there is no setOptions function, but there is a withOptions function).

    So try this:

    import { addDecorator, configure } from '@storybook/react';
import { withOptions } from '@storybook/addon-options';

addDecorator(withOptions({ name: 'my name' }));

// rest of the config goes here

    Also, make sure to register the addon by adding the following line in your addons.js file:

    import '@storybook/addon-options/register';

    Reference: https://www.npmjs.com/package/@storybook/addon-options

    Aside: The reason it has to be within a decorator is because the UI of storybook is rendered as part of each story, so you can't just set options globally without having each story apply those settings.