Panels not visible in React Storybook - storybook

Question

I am using Storybook version 3.3.15 on Windows 7 running node version 6.3.1 and npm version 3.10.6.
On running storybook, I see 'No panels Available' message in the bottom of the page where actions panels are rendered. I have imported addon-actions in addons.js: import #storybook/addon-actions/register and the module is also present in node_modules folder. I am not getting any errors regarding this during webpack compliation or in browser console.
How do I make the Action Panel appear?
Note: I cannot update the Node and NPM versions because I am working on a professional level app wherein lots of people are involved and its a very big codebase.

Answer 1

In my case they were simply hidden and in the wrong orientation. Had to use the D and A keyboard shortcuts to make them appear again.

Answer 2

in my case just hitting d worked

Answer 3

For me the whole main menu disappeared at one point. The only thing that helped was running sessionStorage.clear() in the console and then refreshing the page.

Answer 4

First of all, check if you have the addon panel set to show/hide in the dropdown menu at the top left of the Stoybook UI screen, also check the dropdown item called 'change addons orientation' (mine was changed and was bumped off screen because of screen width).
If that doesn't work, try setting the options in the storybook config.js file:
In the Storybook config.js file you can add an options parameter for some default settings, this includes setting the visibility and position of the addons panel.
import { addParameters } from '#storybook/react';
// settings for storybook - show and position addon panel
addParameters({
options: {
// display panel that shows addon configurations
showPanel: true,
// where to show the addon panel --- #type {('bottom'|'right')}
panelPosition: 'bottom',
}
});

Answer 5

In my case I was missing the .storybook/addons.js file. It looks like this became a requirement in a recent version because the actions add-on used to work fine for me initially.
To clarify potential confusion:
As the documentation specifies, you need to have a addons.js file in your hidden .storybook/ directory (most likely at the root of your project) even if all it contains is just this 1 line.
import '#storybook/addon-actions/register';

Answer 6

I Just found out it by trying different keys on my keyboard:
If you press "S" - it switches Sidebar in StoryBook Of
and On! Try it!
My Browser: Chrome, Operating system: Mac OS

Answer 7

In Mac I solved it by pressing fn + s.

Answer 8

I was having this problem; hitting S would shift my components without showing the sidebar, and even after clearing my localStorage and sessionStorage I could barely see the edge of my sidebar.
Then, I realized that I had zoomed in to see my components more closely, and that the sidebar was hiding/showing, but just off-screen.. I just needed to zoom out. 🤦‍♂️
Sharing here in case anyone makes the same mistake.

Answer 9

I had a similar problem and installing #storybook/addons (in addition to the steps you mentioned) fixed it.
Run:
npm i -D #storybook/addons