Storybook 4.0.0-alpha.1 viewport-addon works only as panel on angular and the javascript Api doesn't.

[gpincheiraa]

I'm trying to use the version 4.0.0-alpha.1 with angular and works really good. The problem it is when I tried to use the Javascript API for manipulate the addon-viewport. As a panel the addon works good but when I tried to set the viewport for some stories I get the following error:

Warning: Failed prop type: Invalid prop `children` supplied to `Viewport`, expected a ReactNode.
    in Viewport

and

Unhandled Promise rejection: Unexpected value 'undefined' declared by the module 'DynamicModule' ; Zone: <root> ; Task: Promise.then ; Value: Error: Unexpected value 'undefined' declared by the module 'DynamicModule'
    at syntaxError (compiler.js:485)
    at compiler.js:15273
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver../node_modules/@angular/compiler/esm5/compiler.js.CompileMetadataResolver.getNgModuleMetadata (compiler.js:15271)

My code it is:

.storybook/config.js

import { configure } from '@storybook/angular';

function loadStories() {
	require('../stories/index.ts');
}
configure(loadStories, module);

.storybook/addons.js

import '@storybook/addon-viewport/register';

stories/myStory.js

import { storiesOf, addDecorator } from '@storybook/angular';
import { withViewport } from '@storybook/addon-viewport';
import { HeaderComponent } from '../../src/app/modules/ui-common/header/header.component';

storiesOf('Header component Mobile', module)
	.addDecorator(withViewport('iphone6'))
	.add('Header white', () => ({
		component: HeaderComponent
	}));

My dependencies Installed:

npm install --depth=0

Dependencies:
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @angular/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @storybook/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Edit: You can reproduce this error on the following repo and branch:
https://github.com/gpincheiraa/storybook-components-sample/tree/addons-viewport

[mshaaban088]

Thanks @gpincheiraa for reporting this issue.
Unfortunately the viewport's decorators (a.k.a APIs) only work for React, as it uses React wrapper component internally, I should have mentioned that in the documentation though.

I believe this functionality should be supported in other libraries/frameworks (e.g. angular, vue), probably I'm gonna work on it by next week.

@danielduan @Hypnosphi Do you think we should create separate ticket for each library/framework?

[stale]

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!

[mshaaban088]

I've tested it now with releases/v4.0.0-alpha.7, and it works pretty well

[Hypnosphi]

Yes, this was probably fixed with #3555