Storybook: Action Logger Panel Is Not Available

[PDXIII]

I added Storybook to my create-react-app project but the action logger panel doesn’t show up. It is registered in the .storybook/config file and I imported the action and added the action handler, but the panel doesn’t show up. Any thought where I might have done a mistake?

[shilman]

Did you register it in .storybook/addons.js using import '@storybook/addon-actions/register';?

[PDXIII]

Yes, I did.
And I do import { action } from '@storybook/addon-actions'; on every story, too. May it have something to do with the chapters addon?

[shilman]

hmm do you have a public project i can look at?

[PDXIII]

No sorry! Not allowed to share the project. 😿
But I can share the source code of the .storybook/config & addons and one of my stories.

.storybook/addons.js

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
// import 'react-storybook-addon-chapters';

.storybook/config

/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */

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

const req = require.context('../stories', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

TestButton.stories.js

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

storiesOf('TestButton', module)
  .add('with text', () => (
    <button onClick={action('clicked')}>Hello Button</button>
  ))
  .add('with some emoji', () => (
    <button onClick={action('clicked')}>😀 😎 👍 💯</button>
  ));

[shilman]

This all looks fine to me. Do you mind creating a minimal project, even if it doesn't have the rest of your source code? I think you'll find that this works, and it will help you narrow down what's going on in your project config.

[PDXIII]

I haven’t found a solution but I can say the bug is in another part of my application.
Tried a new installation of storybook and the panel didn’t show up per default.
Something is blocking it.

It’s not crucial for me at the moment. I may find out when I need to refactor my app.

Thanks for trying to help!

[smiket]

I have the same issue (no panels are available). I actually had action, note and knob panels. Recently I upgraded from 3.0.0 to 3.1.6, and just noticed the panels are gone. I'll see if I can work on this (may try reverting) and let you know what I find.

[PDXIII]

Funny thing though!
I down graded storybook to 3.0.0 and it worked like expected then I upgraded to 3.1.2 and 3.1.5 and those worked too. Then I upgraded again to 3.1.6 (the version which didn’t show the panel). And this worked too 😳
Currently I am trying 3.1.7 and don’t face any problems.
This is kind of strange. Sure I made some changes in between, but I still had this bug before I was trying older storybook versions.

[shilman]

@PDXIII @smiket This is an NPM package versioning issue. There maybe something wrong on the storybook side that is triggering it, but at the end of the day, removing node_modules and reinstalling should fix the problem. Super annoying, I know! 😖

[smiket]

Thanks Michael - I can confirm that this fixed the issue for me (cleaned out node_module).

[philipthemagnificent]

I had a problem with Action Logger Panel not displaying. I tried installing other panels to see if it was a problem with action logger, but they didn't work either. Knob, Notes, Action, never displayed a tab in the panel. I was getting 'No Panels Available' in the panel area.

Updating my version of node from 6.10 to 8.2.1 fixed this issue for me.

[shilman]

@philipthemagnificent i suspect that cleaning out node_modules might have also fixed the issue for you.

[philipthemagnificent]

@shilman I read other tickets besides this one, so I know what you mean, I was unsure where to post my comment, but I decided on the first ticket I came across.

Before updating NodeJs, I tried cleaning out node modules and doing a fresh install. I also cleared my npm cache out for extra insurance.

When that didn't work, I updated NPM, and tried again.

I decided to do a complete fresh installation, I deleted my entire repo and started from complete scratch.

That didn't work, so I checked and updated my node version to 8.2.1, and everything worked!

[chris-ryu]

I still have the same problem after clearing npm cache deleting node_modules and re installing.
My node version is 8.4.0

Another odd thing is that calling action() makes error "Error: Accessing nonexistent addons channel, see ..."

[astrotim]

I am having the same issue.

Node 8.2.1
@storybook/react 3.2.8

import '@storybook/addon-actions/register'; in addons.js
import { action } from '@storybook/addon-actions'; in story file

// story JSX
<Button onClick={action('button-click')}>
  Button with onClick event
</Button>

console error

index.js:39 Uncaught Error: Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel
    at AddonStore.getChannel (index.js:39)
    at handler (preview.js:51)
    at button_click (eval at action (preview.js:67), <anonymous>:1:43)
    at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
    at executeDispatch (EventPluginUtils.js:85)
    at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
    at executeDispatchesAndRelease (EventPluginHub.js:43)
    at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
    at Array.forEach (<anonymous>)
    at forEachAccumulated (forEachAccumulated.js:24)

I have removed node_modules and reinstalled.

The Knobs addon is working normally.

[TroySchmidt]

I had a doozy of a time with the same issue. And actual the weird thing was before I even created addons.js the action panel was showing up itself. Then I tried to add knobs and hit all kinds of problems. Deleted lock.json, node_modules, upgrade, downgrade it finally worked.
Now the CI server for VSTS I have setup does a clean build from scratch no node_modules even exists. It attempt to do the build-storybook .out and the results is the panels are missing, but no errors. If I login to the machine and manually build it a second time with admin rights to the command window then it builds it properly. Something is definitely wrong here and the recommendation of clearing out the node_modules folder every time isn't gonna fix it.

[danielduan]

Are you importing @storybook/addons? That is unnecessary now and might conflict because it also imports link and action

[TroySchmidt]

I am not.

console.log('addon registering');
import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-options/register';

The console log is getting called, still no panels and no error. And before I added the actions register it wasn't showing up in the panels just knobs was. So something about them being included now versus being external and still some other external ones is getting wires crossed maybe.

[danielduan]

Do you have a repo online where this can be reproduced?

[TroySchmidt]

No I do not. And this is working on my local machine, it works if I login and manually run this command on the build server. But if the build server does it as a VSTS task calling npm with the npm.cmd it does not work. I have tried clearing cache, the build server deletes the whole folder and starts fresh, there is no lock.json files. It is baffling.

[ericmasiello]

I'm having a similar issue using:

"@storybook/addon-options": "3.3.15",
"@storybook/react": "3.3.15",

If anyone wants to look at the project the repo is here https://github.com/ericmasiello/priorityconstruction

[tonytonyjan]

closed without a reason?

[code-for-coffee]

I had the same issue. The problem was that the project I am working with uses Lerna to manage everything as a monorepo. start-storybook and build-storybook were called in the root package.json and not the package that contained the actual storybook application. I am not sure if if it a scoping issue or what but the moment that I then called this inside of the child package.json, it worked fine and Action Logger showed up with no issue.

The original intent of having this handled on the root of the project was so we could build a static build and allow our Jenkins build to create an artifact of the static HTML for others to view.

Project Structure (rough example):

package.json
lerna.json
packages/
--storybook/
--storybook/.storybook/
--storybook/package.json

package.json script block:

"build-storybook": "lerna run build-storybook",
"storybook": "lerna run storybook",

or

"build-storybook": "cd packages/storybook && npm run build-storybook",
"storybook": "cd packages/storybook && npm run storybook",

storybook/package.json script block:

"storybook": "start-storybook -p 9009 -s ../../public",
"build-storybook": "build-storybook -s ../../public -o ../../storybook-static",

@danielduan would it be ok to submit a PR for the documentation to clearly explain this?

[geekytime]

We are in the process of combining our projects into a lerna-based monorepo, and I can confirm that the projects in the monorepo all have this "No panels available" problem, and the projects that have _not_ been migrated to the monorepo still work fine. All of our storybook-related devDependencies are added directly in our packages, but I suppose something else that lerna links in via lerna bootstrap could be causing an issue?

[gissehel]

I'm also having this issue. "No panels available". Always. It never worked.

Tested on windows (using wsl with node installed in ubuntu 18.04). Also tested on true ubuntu server.
Tested with storybook server, and with static generation.
Tested with chrome and firefox.
Removed node_modules more than once.
Tested with npm and yarn (node_modules and lock files removed between each test).

Always the same behavior.

I created a minimal project with almost nothing except the button example from the tutorial page.

You can find that project here : https://github.com/gissehel/not-working-storybook

Everything cited at the top has been tested with that minimal example.

Here is the deps:

  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.4",
    "@storybook/addon-links": "^4.1.4",
    "@storybook/addons": "^4.1.4",
    "@storybook/react": "^4.1.4",
    "babel-loader": "^8.0.4"
  }

node -v
v10.12.0

I don't know how to make the panel works !! I don't have any idea where to look.

[lucifer1004]

I'm also having this issue. "No panels available". Always. It never worked.

Tested on windows (using wsl with node installed in ubuntu 18.04). Also tested on true ubuntu server.
Tested with storybook server, and with static generation.
Tested with chrome and firefox.
Removed node_modules more than once.
Tested with npm and yarn (node_modules and lock files removed between each test).

Always the same behavior.

I created a minimal project with almost nothing except the button example from the tutorial page.

You can find that project here : https://github.com/gissehel/not-working-storybook

Everything cited at the top has been tested with that minimal example.

Here is the deps:

  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@storybook/addon-actions": "^4.1.4",
    "@storybook/addon-links": "^4.1.4",
    "@storybook/addons": "^4.1.4",
    "@storybook/react": "^4.1.4",
    "babel-loader": "^8.0.4"
  }

node -v v10.12.0
I don't know how to make the panel works !! I don't have any idea where to look.

Same here. I've tried node 11.7.0, 10.15.0 and 8.14.0.

Not only panels do not show, but options (addParameter) do not work, either.

[gissehel]

Ok, so it works now...

What I missed from the doc was a file addons.js in .storybook with content:

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

[Arch1tect]

Ok, so it works now...

What I missed from the doc was a file addons.js in .storybook with content:

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

This solved my problem as well, but I believe this is a bug. I installed storybook with one line from the official website and I got this

I don't have the addons.js file and had to create it myself.

[shilman]

@Arch1tect did you use sb init? And it didn't generate an addons.js file?

[Pixelatex]

@shilman I had this issue as well and it seems storybook is setting certain cookies that hide the addons panel. I had to clear my local storage to get my panel back

[shilman]

cc @tmeasday @ndelangen regarding local state and caching

[Adomas202]

Funny thing though!
I down graded storybook to 3.0.0 and it worked like expected then I upgraded to 3.1.2 and 3.1.5 and those worked too. Then I upgraded again to 3.1.6 (the version which didn’t show the panel). And this worked too 😳
Currently I am trying 3.1.7 and don’t face any problems.
This is kind of strange. Sure I made some changes in between, but I still had this bug before I was trying older storybook versions.

I've tried everything. Deleted Node modules and package-lock.json, installed @storybook/addons, deleted cache, nothing worked. Then I changed the port from 8081 to 8084 and it works!

[shilman]

@Adomas202 that's because you need to clear local storage :)

[Adomas202]

@shilman Well I did, but it still doesn't show up on that 8081 Port 😕.

[aseem2625]

Thanks @Adomas202 for suggestion. I'm having 2 different projects.

Even though both projects are running at the same time, their storybook can't have same port 6006.
Had to make both different.

[robaxelsen]

For me it still didn't work after clearing storage, not until I toggled "Change addons orientation" on and off in the sidebar menu:

[tarwn]

Addon orientation "solved" this for me as well after going through all of the other usual steps (clearing cache, nuking node_modules, updating dependencies, etc).

[AnupamaHosad]

@shilman I had this issue as well and it seems storybook is setting certain cookies that hide the addons panel. I had to clear my local storage to get my panel back

This is the only thing that worked for me. Thank you so much for the suggestion @Pixelatex

[astrotim]

I'm getting this as well.

If I open the popover panel, I can see the "Show addons" tick icon toggling, but the panel is not displayed.

I see this logged to the console

'modifiers' prop reference updated even though all values appear the same.
Consider memoizing the 'modifiers' object to avoid needless rendering. 
    in InnerPopper (created by Context.Consumer)
    in Context.Consumer (created by Popper)
    in Popper (created by TooltipTrigger)
    in TooltipTrigger (created by WithTooltipPure)
    in WithTooltipPure (created by WithToolTipState)
    in WithToolTipState (created by SidebarHeading)
    in SidebarHeading (created by Context.Consumer)
    in Context.Consumer (created by Context.Consumer)
    in Context.Consumer (created by render)
    in render (created by Sidebar)
    in Sidebar (created by Context.Consumer)
    in Context.Consumer (created by ManagerConsumer)
    in ManagerConsumer (created by _default)
    in _default (created by Layout)
    in Layout (created by Context.Consumer)
    in Context.Consumer (created by render)
    in render (created by Anonymous)
    in Anonymous

but this looks like it's maybe only related to the popover UI.

After manually clearing local storage, it works as expected.

[Jeffzholy]

@tarwn lol, nice try, it works for me as well!!! But anyway, it is a UX bug, storybook team should update it somehow.

[vnues]

For me it still didn't work after clearing storage, not until I toggled "Change addons orientation" on and off in the sidebar menu:

Thank you!