Storybook: Error using withInfo: Unexpected value 'undefined' declared by the module 'DynamicModule'

[jakobloekke]

Describe the bug
Error when adding "withInfo" addon to storybook using Angular 7.

Unexpected value 'undefined' declared by the module 'DynamicModule'

To Reproduce

1. npm i -D @storybook/addon-info
2. Add import {withInfo} from '@storybook/addon-info'; and stories.addDecorator(withInfo);
3. Start storybook
4. Go to story and see red error screen

Expected behavior
Not expecting to see an error screen.

Screenshots

System:

• OS: [OSX 10.14]
• Device: [Macbook Pro 2017]
• Browser: [chrome]
• Framework: [angular 7]
• Addons: [withInfo, withKnobs, withNotes]
• Version: [4.0.4]

Additional info
It works when I remove the "withInfo" addon. So it's not related to https://github.com/storybooks/storybook/issues/3614, which was about the withKnobs addon.

[Keraito]

@jakobloekke that's quite weird. Can you show which versions you are exactly using for the different storybook packages? Also, do you have a reproduction repo that we can take a look at?

[bufke]

I get this as well. Using:

    "@angular/core": "^7.0.4",
    "@storybook/addon-info": "^4.0.9",
    "@storybook/addons": "^4.0.9",
    "@storybook/angular": "^4.0.9",

[hughanderson4]

Same problem here. Angular 7. Only when using withInfo addon.

I noticed addon-info does not have register.js like other addons.

Also docs of addon-info don't say to add to addons.js

I tried adding to addons.js anyway, like this:

import '@storybook/addon-info';

it did not help.

Also I tried to set global withInfo in config.js as docs say:

addDecorator(withInfo); // Globally in your .storybook/config.js.

This did not work to activate withInfo, at all. Only way I can activate withInfo is by using addDecorator on each storiesOf which is not desirable.

[hipstersmoothie]

This is probable because the info addon only support react https://github.com/storybooks/storybook/issues/4770#issuecomment-437788574

https://github.com/storybooks/storybook/blob/next/ADDONS_SUPPORT.md

[hipstersmoothie]

It's probably because the storysource section is react only, making the whole addon react only. Try using the addon-notes

[hughanderson4]

Thanks, but unfortunately addon-notes isn't really the same features as addon-info. Need the usage information to be the first thing presented in the docs, not stuck in a tab.

[hipstersmoothie]

@hughanderson4 is it being the first tab not enough? storybook has a docs mode coming soon. but IDK if that will support vue either. @ndelangen is the plan for the new docs mode to support all app types?

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

[david-ru]

Hi there! I'm having the same error but, in my case, I'm trying to return a React object inside an Angular project. Something like this:

import { storiesOf } from '@storybook/angular'; import React from 'react'; ... ... const stories = storiesOf('Storybook Knobs', module); stories.addDecorator(withKnobs); stories.add('with a button', () => { return ( React.createElement( 'button' ) ); });

In my case, I need to generate that button dynamically, so React's createElement is very useful. Does anybody know if there a way to solve this error?

Some of my dependendies are:

"@angular/core": "~7.1.0",
"@babel/core": "^7.2.2",
"@storybook/angular": "^4.0.12",
"react": "^16.6.3",

Thanks a lot!

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

addon-info does not support angular (see ADDONS_SUPPORT.md), so this is a feature request not a bug. We'll support all the view layers with the upcoming docs mode, so that will be the recommended solution once it lands.

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

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!