Storybook: @storybook/addon-info not working

[palmerminto]

Describe the bug
Just installed @storybook/addon-info. When following the instruction in the readme I either get No Preview or it's stuck in the loading state (see screenshot). Nothing in the console to say there is an error.

Expected behavior
Could I get instruction on how to fix?

Screenshots

Code snippets

When trying to do it on a Component for which I get No Preview
`
import React from 'react';
import { storiesOf, addDecorator } from '@storybook/react';
import { withA11y } from '@storybook/addon-a11y';
import { withInfo } from '@storybook/addon-info';

import StandardAction from './StandardAction';

addDecorator(withA11y);

storiesOf('Navigation|Buttons', module)
.addDecorator(withInfo)
.add('Standard Action', () => (

),
{ info: '☹️ no emojis' },
);
"@storybook/addon-a11y": "^5.0.10",
"@storybook/addon-actions": "^5.0.10",
"@storybook/addon-info": "^5.0.10",
"@storybook/addon-links": "^5.0.10",
"@storybook/addons": "^5.0.10",
"@storybook/react": "^5.0.10",
`

For when I'm trying to do it globally and it gets stuck in Loading state
config.js
`import { configure } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';

import '../src/index.scss';

addDecorator(withInfo);

function loadStories() {
require('../src/atoms/StandardAction/StandardAction.stories');
require('../src/atoms/NoNav/NoNav.stories');
require('../src/atoms/SelectListInput/SelectListInput.stories');
require('../src/atoms/Container/Container.stories');
}

configure(loadStories, module);`

[shilman]

react.memo requires React 16.6 and I'm guessing that somebody made a change to addon-info that requires this version. If you upgrade I expect it will work. Or I'd be happy to accept PRs to remove the use of react.memo.

[palmerminto]

@shilman Thanks for getting back to me so promptly. That solved my problem.

btw - when do you think you'll release the new version of Docs?

[shilman]

Trying to get something usable out ASAP as 5.2-alpha.0 but expect that it will take some time to stabilize: https://gist.github.com/shilman/1428d44b2b53644e7b952ac441d2e954

[devina91]

Not sure if this is related but addon-info also doesnt work for me when i use it with addon-readme. I have the storybook/react version 5.0.10 and I am trying use the addons together in global configuration.
It has also been discussed in https://github.com/tuchk4/storybook-readme/issues/136

Here's a screenshot of the error:

[palmerminto]

hey @devina91, Could you open a new issue - you'll probably get a more focused solution? I'm going to close this.

[mlmassey]

@palmerminto @shilman I'm having the same issue. Basically, when I'm importing withInfo as import {withInfo} from '@storybook/addon-info' I immediately see that the left panel never loads and the cursor continually shows loading. Basically, if I never import withInfo, everything works fine. I'm running Storybook 5.0.11. On a side note, I'm running React 16.3, so not sure if that is what is causing the problem. I cannot upgrade to a higher version due to our code base. As noted above though, Storybook/withInfo should not be dependent on newer versions or React.

[shilman]

@mlmassey PRs welcome to remove the call to memo

[devina91]

I am running react 16.8.3 actually and still having this problem, addon info never appears on the sidebar and I get that error on importing, I did open a new issue for this, it is this one- #6622

[mlmassey]

@shilman Do you believe the call to memo is what is causing the problem. As I see it, I saw two problems:

1. console.error complaining about memo (don't really care)
2. Left panel never loads and show a spinner when importing withInfo, which makes it unusable.
   My final solution was to remove withInfo completely from my project by hand-editing 450 occurrences and now we are happily using Storybook 5. :)

[shilman]

@mlmassey I believe the call to memo is a problem if you're using earlier versions of react. If you're running into this memo issue, currently, you have three options (I'm guessing):
1) Fix addon-info to not use memo
2) Remove addon-info from your project
3) Upgrade your react to 16.6+

I'm currently working on an addon-info replacement, and I hope to address most of the open addon-info issues there: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

It's currently in "technical preview" in the #docs-mode channel on our Discord https://discord.gg/UUt2PJb