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

Question

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",
...
}

Answer 1

For anyone who ran into this question because they experienced the Addon value should end in /register OR it should be a valid preset... error with @storybook/addon-postcss, the fix I found was removing @storybook/addon-postcss from the addons property and adding it to the managerEntries property.

With error:

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-postcss'
  ],
  framework: '@storybook/react',
};

Solved with:

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  managerEntries: ['@storybook/addon-postcss'],
  framework: '@storybook/react',
};

Answer 2

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.