Unclear docs? How do I install it?

[anatoliykmetyuk]

trafficstars

Installation instructions say:

Just import it in your storybook config.js:

What config.js? I looked it up in the docs, but nothing comes up. All the storybook config files I know are located in the .storybook folder: main.ts and preview.ts. I tried adding the addon to main.ts, "@storybook/addon-console", but with no result. Is that a case of an obsolete doc or am I missing something?

[vascoeduardo]

I have the same Problem. Any updates?

[adrianwix]

Same problem. config.js was deprecated https://github.com/storybookjs/storybook/blob/next/MIGRATION.md?ref=storybookblog.ghost.io#from-version-52x-to-53x:~:text=config.js%20has%20been%20renamed%20to%20preview.js.%20preview.js%20configures%20the%20%22preview%22%20iframe%20that%20renders%20your%20components.

[adrianwix]

This syntax is not used when using addons-essentials https://storybook.js.org/addons/@storybook/addon-console#:~:text=Addon%20console%20don%27t,contains%20this%20line%3A

[alvis]

The doc is certainly outdated and doesn't more harm than being helpful in today's settings. Simply put, for v7 & v8, what we need is simply having this line

// .storybook/preview.tsx
import '@storybook/addon-console';

// rest of the preview configuration ...

[IanVS]

Would anyone like to submit a PR?

[RubyHuntsman]

Any updates?

[ReiRev]

For me, this worked. I changed preview.ts in .storybook

import type { Preview } from "@storybook/react";
import { withConsole } from "@storybook/addon-console";

const preview: Preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
  decorators: [(Story, context) => withConsole()(Story)(context)],
};

export default preview;