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

1

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.

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

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.