storybook @storybook/addon-options dosent work

user_7174045 0
Viewed 1271

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.

storybook reactjs
1 Answers

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/addons@3.4.11 @storybook/react@3.4.11

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.

user_29212440
Related