Creating Your Own Preset

[rodoabad]

Hey folks, I'm trying to create my own preset so I don't have to re-install the same addons over and over again on several repos that I have.

// src/preset.js
const addons = (entry = []) => {
    return [
        ...entry,
        require.resolve('storybook-addon-jsx/'),
        require.resolve('@storybook/addon-knobs/'),
        require.resolve('@storybook/addon-a11y/'),
        require.resolve('@storybook/addon-docs'),
        require.resolve('storybook-addon-react-docgen'),
        require.resolve('@storybook/addon-actions/'),
        require.resolve('@storybook/addon-controls')
    ];
};

const config = (entry = []) => {
    return [
        ...entry,
        require.resolve('./parameters')
    ];
}

module.exports = {
    config,
    addons
}

// src/parameters.js
require('@storybook/addon-console');
const {DocsContainer, DocsPage} = require('@storybook/addon-docs/blocks');
const {jsxDecorator} = require('storybook-addon-jsx');
const {withPropsTable} = require('storybook-addon-react-docgen');

const parameters = {
    docs: {
        container: DocsContainer,
        page: DocsPage
    }
};

const decorators = [
    withPropsTable,
    jsxDecorator
];

module.exports = {
    parameters,
    decorators
};

```js
// package.json
  "main": "src/preset.js",
  "dependencies": {
    "@storybook/addon-a11y": "^6.1.14",
    "@storybook/addon-actions": "^6.1.14",
    "@storybook/addon-console": "^1.2.2",
    "@storybook/addon-controls": "^6.1.14",
    "@storybook/addon-docs": "^6.1.14",
    "@storybook/addon-knobs": "^6.1.14",
    "storybook-addon-jsx": "^7.3.4",
    "storybook-addon-react-docgen": "^1.2.42"
  },

But I'm getting the following error.

WARN   Failed to load preset: {"name":"storybook-preset-rodo/","type":"presets"} on level 1
ERR! TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator))

Is there something I'm forgetting here?

I'm reading https://storybook.js.org/docs/react/addons/writing-presets if that helps.

How I'm consuming the preset.

// [external].storybook/main.js
module.exports = {
    addons: [
        'storybook-preset-rodo/'
  ]
};

[shilman]

It generally looks OK to me, but there are lots of possible gotchas. For example the following trailing slash?

require.resolve('storybook-addon-jsx/'),

I'd start with an empty list of addons and then add them one by one until you figure out which one is causing problems.