Storybook: addon-viewport breaks the story in Storybook HTML

[bencergazda]

Describe the bug
Even the simplest Storybook configuration throws Error in the console if we are trying to use the addon-viewport (sometimes work after HMR).

To Reproduce
npm install https://github.com/bencergazda/storybook-addon-viewport-bug

Expected behavior
addon-viewport should scale the Storybook viewport to the pre-defined size

System:

Environment Info:

  System:
    OS: macOS 10.15
    CPU: (4) x64 Intel(R) Core(TM) i3-8100B CPU @ 3.60GHz
  Binaries:
    Node: 12.12.0 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.70
    Firefox: 69.0.3
    Safari: 13.0.2
  npmPackages:
    @storybook/addon-viewport: ^5.2.5 => 5.2.5 
    @storybook/html: ^5.2.5 => 5.2.5 

Additional context
The same configuration worked OK in 5.1.9

[trescenzi]

I am also seeing this issue. It's possible to register the addon to get the toolbar icon and that works fine, but as soon as you try and add parameters that interact with viewport the stories break.

[jgarplind]

Experiencing similar problems when setting defaultViewport.

.addParameters({ info: text, viewport: { defaultViewport: 'ipad' } }) breaks the story, whereas .addParameters({ info: text }) works just fine

The error reads:
Uncaught TypeError: Cannot convert undefined or null to object

Tried using both "version": "5.2.6" and "version": "5.1.1"

[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!

[luke-j]

I'm seeing this problem, too. As soon as an object like { viewport: { defaultViewport: 'iphone6' } } is added to a particular story, that story breaks.

~Currently haven't found a workaround - does one exist?~

Edit: Upgrading to @storybook/[email protected] turns this into a warning, as mentioned in https://github.com/storybookjs/storybook/issues/9129 and https://github.com/storybookjs/storybook/pull/9137, you are required to pass viewports to resolve the issue entirely.

[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!

[bencergazda]

This has been fixed in 5.3.0, as how @luke-j reported. Closing this issue.