Storybook: Viewport addon is not registered automatically

[vasilii-kovalev]

Describe the bug
As documentation says, Essentials addon includes both Backgrounds and Viewport addons. Backgrounds addon is registered automatically, Viewport requires manual registering.

To Reproduce
Steps to reproduce the behavior:

1. Register Essentials addon
2. Run Storybook - Viewport addon is not presented on UI
3. Register Viewport addon below
4. Re-run Storybook - Viewport addon is presented on UI

Expected behavior
Viewport addon is registered automatically as well as Backgrounds one.

Screenshots
Warning about already registered addon skipping:

If registered manually, it works correctly:

Hoping that the addon is registered automatically:

It isn't:

Code snippets
Not working config in _main.ts_:

const config: StorybookConfig = {
  ...
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-a11y/register',
  ],
  ...
};

Working config in _main.ts_:

const config: StorybookConfig = {
  ...
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/preset-create-react-app',
    '@storybook/addon-a11y/register',
    '@storybook/addon-viewport/register',
  ],
  ...
};

System:

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
  Binaries:
    Node: 14.7.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 84.0.4147.105
    Edge: Spartan (44.18362.449.0)
  npmPackages:
    @storybook/addon-a11y: ^5.3.19 => 5.3.19 
    @storybook/addon-actions: ^6.0.0-rc.29 => 6.0.0-rc.29 
    @storybook/addon-essentials: ^6.0.0-rc.29 => 6.0.0-rc.29
    @storybook/addon-links: ^6.0.0-rc.29 => 6.0.0-rc.29
    @storybook/node-logger: ^6.0.0-rc.29 => 6.0.0-rc.29
    @storybook/preset-create-react-app: ^3.1.4 => 3.1.4
    @storybook/react: ^6.0.0-rc.29 => 6.0.0-rc.29

[shilman]

It's working properly in Storybook's monorepo (NOTE: comment out the disabling code in main.js): https://github.com/storybookjs/storybook/tree/next/examples/cra-ts-essentials

Do you have a public repro?

[vasilii-kovalev]

Not yet. I'll do it today.

[vasilii-kovalev]

Actually I've tried to import my project via CodeSandbox, but it throws some errors. It seems, that it is related to its ecosystem.
Here the repository: https://github.com/vasilii-kovalev/games_world
I've created a client branch (where all the files on the first level) for convenience.

[shilman]

Cool I'll check it out

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[shilman]

Fixed in #12148 and released in https://github.com/storybookjs/storybook/releases/tag/v6.0.14. Closing this for now. Please let me know if you're still seeing this after upgrading.