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
ERR! @storybook/addon-docs
ERR! Addon value should end in /register OR it should be a valid preset
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",
...
}

2 Answers

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

The message comes from here 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.

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',
};