Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Storybook - Addon value should end in /register OR it should be a valid preset

Even thought my storybook still builds normally, I started getting this error on my terminal

ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-docs
ERR! Addon value should end in /register OR it should be a valid preset https://storybook.js.org/docs/react/addons/writing-presets/
ERR! @storybook/addon-essentials

and I really don't understand what I am missing.

This is my main.js

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-links',
    '@storybook/addon-controls',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
  ],
};

and this is my preview.js

import React from 'react';
import { MemoryRouter } from 'react-router-dom';

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  options: {
    storySort: (a, b) =>
      a[1].kind === b[1].kind
        ? 0
        : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
  controls: { hideNoControlsWarning: true },
};

export const decorators = [(story) => <MemoryRouter>{story()}</MemoryRouter>];

on my main.js I already tried

 // also with /preset

 addons: [
    '@storybook/addon-docs/register',  
    '@storybook/addon-essentials/register',
    ...
  ],

but it just made it worst.

these are my dependencies

"dependencies": {
    "@storybook/addon-actions": "^6.3.4",
    "@storybook/addon-controls": "^6.3.4",
    "@storybook/addon-essentials": "^6.3.4",
    "@storybook/addon-links": "^6.3.4",
    "@storybook/node-logger": "^6.3.4",
    "@storybook/preset-create-react-app": "^3.2.0",
    "@storybook/react": "^6.3.4",
...
}
like image 334
danihazler Avatar asked Jul 13 '21 10:07

danihazler


People also ask

How do you add addons to storybook?

Using preset addons Preset addons have a three-step installation process: install, register and optionally configuration. For example, to use SCSS styling, run the following command to install the addon and the required dependencies: WEBPACK-4. WEBPACK-5.

What is addon in storybook?

Addons extend Storybook with features and integrations that are not built into the core. Most Storybook features are implemented as addons. For instance: documentation, accessibility testing, interactive controls, among others. The addon API makes it easy for you to configure and customize Storybook in new ways.

What is storybook addon essentials?

Storybook Essentials is a curated collection of addons to bring out the best of Storybook. Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain framework support for all of the officially supported frameworks.

What are actions in storybook?

storybook-actions is an addon to Storybook's platform. Actions provide you with a mechanism that logs user interactions and data as it flows through your components in the Storybook's UI.


1 Answers

You receive this message because @storybook/addon-docs is missing from your dependencies.

The message comes from here https://github.com/storybookjs/storybook/blob/7064642e1aee7786c77fe735c064c0c29dbcee01/lib/core-common/src/presets.ts#L99-L120 Long story short, if storybook can't resolve an addon, it will throw this error. It's a bit misleading, but it's the cause.

like image 185
Alvis Avatar answered Oct 12 '22 20:10

Alvis