Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addon-viewport breaks the story in Storybook HTML

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:6 (1 by maintainers)

Top GitHub Comments

4reactions

trescenzicommented, Nov 14, 2019

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.

2reactions

luke-jcommented, Dec 24, 2019

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/addon-viewport@5.3.0-rc.1 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.

Top Results From Across the Web

Viewport - Storybook - JS.ORG

The Viewport toolbar item allows you to adjust the dimensions of the iframe your story is rendered in. It makes it easy to...

@storybook/addon-viewport | Yarn - Package Manager

Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in Storybook. This helps build responsive components inside of ......

Automated stories with Storybook and StencilJS

Get insights into StencilJS & learn how to save time to create all your stories in an automatic way.

Webpack 5 and Storybook 6 integration throws an error in ...

Working on Webpack 5 and Storybook integration in our React apps' repository ... I had to run npm i --save-dev html-webpack-plugin and npm...

@open-wc/demoing-storybook - npm

import { Story, Preview, Meta, Props } from '@open-wc/demoing-storybook'; import { html } from 'lit-html'; import '../demo-wc-card.js'; ...