Storybook: Addons panel not showing up in development

[soosap]

In development, i.e. when running start-storybook -p 7007 -c .storybook the addons panel with Knobs and JSX (see screenshot) disappears. However, when building storybook w/ build-storybook -o dist it is available. Also not all addons are affected, but only those that are positioned in the bottom panel (see screenshot). Other addons such as @storybook/addon-backgrounds operate as usual.

I do not see any error messages being printed out. Any suggestions on how I could debug this?

TypeScript 3.5.2
React 16.8.6
Storybook 5.1.8

[shilman]

I think the UI state is stored in localStorage. I'm wondering if simply selecting "show addons" from the menu fixes it:

If not I'd suggest disabling addons to see if there is an addon that's causing it to error somehow.

[soosap]

Hi there, thanks for the quick reply. It seems the problem has been with the Chrome browser. All others browsers DO display the addons panel. Yet for some reason even after updating Google Chrome to Version 75.0.3770.100 it does not show.

[frankstallone]

This happens to me in Google Chrome, Google Chrome Canary and Firefox Nightly. All latest. Storybook 5.1.8. The only way I've been able to get it to work is to hop into Incognito mode (thx to jamime on Discord for that). When I click on the menu I immediately get this error in console...

vendors~main.51f0f67cb3cf6d06c38c.bundle.js:31532 Warning: Received `false` for a non-boolean attribute `loading`.

If you want to write it to the DOM, pass a string instead: loading="false" or loading={value.toString()}.

If you used to conditionally omit it with loading={condition && value}, pass loading={condition ? value : undefined} instead.
    in span (created by Context.Consumer)
    in Styled(span) (created by ListItem)
    in a (created by Context.Consumer)
    in Styled(a) (created by ListItem)
    in ListItem (created by TooltipLinkList)
    in div (created by Context.Consumer)
    in Styled(div) (created by TooltipLinkList)
    in TooltipLinkList
    in div (created by Context.Consumer)
    in Styled(div) (created by Tooltip)
    in Tooltip (created by Tooltip)
    in Tooltip (created by InnerPopper)
    in InnerPopper (created by Context.Consumer)
    in Popper (created by TooltipTrigger)
    in Manager (created by TooltipTrigger)
    in TooltipTrigger (created by WithTooltipPure)
    in WithTooltipPure (created by lifecycle(WithTooltipPure))
    in lifecycle(WithTooltipPure)
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown (created by withState(Component))
    in withState(Component) (created by Context.Consumer)
    in Styled(withState(Component)) (created by Sidebar)
    in div (created by SimpleBar)
    in div (created by SimpleBar)
    in div (created by SimpleBar)
    in div (created by SimpleBar)
    in div (created by SimpleBar)
    in div (created by SimpleBar)
    in SimpleBar
    in Unknown (created by Context.Consumer)
    in Styled(Component) (created by ScrollArea)
    in ScrollArea (created by Context.Consumer)
    in Styled(ScrollArea) (created by Sidebar)
    in nav (created by Context.Consumer)
    in Styled(nav) (created by Sidebar)
    in Sidebar (created by Context.Consumer)
    in ManagerConsumer (created by _default)
    in _default (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Nav)
    in Nav (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in Unknown (created by ResizeDetector)
    in ChildWrapper (created by ResizeDetector)
    in ResizeDetector
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by Manager)
    in ThemeProvider (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

[shilman]

@ndelangen This was supposedly fixed in 5.1.7 #7080 #7073 but looks like it's still affecting users in 5.1.8. Any idea what's going on?

@frankstallone If you do localStorage.clear() in normal mode (not incognito) does that fix it?

[frankstallone]

Good question @shilman. Doesn't look like that changes anything. localStorage.clear() then localStorage shows Storage {length: 0}, which is what we want, however the panel does not appear. Hard refresh does not seem to do it either. I would have thought this would work considering Incognito mode works.

[y0n3r]

@shilman Thanks for the tip on localStorage.clear()! Nothing within Storybook was rendering for me using Chrome, but running that statement in the Dev Tools console fixed everything.

[frankstallone]

Oh since we're adding to this, now if it ever happens I go-to Dev Tools > Application > Clear Application Data. That always does the trick.