action is not sending output to action panel (3.0.0-rc2)

[smiket]

Hi,
Thank you for such an excellent tool! I wanted to let you know that after installing 3.0.0-rc2, my actions are not sending output to the action panel. I rimraf'd node_modules to clean everything, then did npm i followed by npm start storybook. Perhaps I have something misconfigured (was all working when I was using kadira/storybook):

In my package.json:

"devDependencies": {
    "@storybook/addon-actions": "^3.0.0-alpha.0",
    "@storybook/addon-comments": "^3.0.0-alpha.0",
    "@storybook/addon-info": "^3.0.0-alpha.0",
    "@storybook/react": "^3.0.0-alpha.0",

In my config.js:

import infoAddon from "@storybook/addon-info";
setAddon(infoAddon);

In my story:

import { action } from "@storybook/addon-actions";
export default storiesOf('EseButton', module)
    .addWithInfo('Enabled', () => (
        <EseButton name="ese-button" onClick={action('button-click')}>
           <span>ESE Button</span>
        </EseButton>
    ));

Everything works as expected, except I do not get output in the action logger.
Let me know if you'd like more information -

Thank you,
Steve

[shilman]

@smiket Hi Steve, Is the repro public? If so I can take a look!nIf not, does it work with you register the addons in .storybook/addons.js?

NOTE: I tried to repro myself, but addon-actions is working for me:

npm i getstorybook
cd testapp/
yarn add getstorybook
./node_modules/.bin/getstorybook 

Then upgrade by hand according to MIGRATION.md

[dangreen]

I'm also have this issue.
It seems that the problem is in styles:

[MoctezumaDev]

I also have the same issue, I don't get the action in the logger

[smiket]

@shilman I updated to the released version (3.0) and everything started working for me. Initially it did not show messages, but I happened to click the link button in the action-logger panel and messages started to display. Not sure if the click had anything to do with it, but all is working for me. Thanks again for following up with me on this - I'm all set now.

[shilman]

Hmm @dangreen @leonidaX does the release version fix it for you also?

[dangreen]

@shilman nope

[shilman]

@dangreen do you have a public example i could look at?

[dangreen]

@shilman suddenly now all works.

[shilman]

@dangreen

[MoctezumaDev]

Well I still have the problem but it might be only a typescript problem.

[shilman]

@leonidaX do you have a public repo I could look at?

[MoctezumaDev]

Sure, the same example that I posted in the typescript issue ticket:

https://github.com/leonidax/storybook-ts-less-example

[shilman]

@leonidaX there was a bug in the code. try:

            <Button settings={{title: "?" , callback: action("hello")}}/>

I'm going to close this for now, but feel free to reopen if you have more issues on this!

[MoctezumaDev]

I see thanks :)

[nathancahill]

Oh jeez, just wasted a couple hours debugging this after upgrading. Actions don't show up until you click "Action Logger" in the pane. storybook/addon-actions and storybook/react versions 3.0.1.

[shilman]

Sorry to hear it @nathancahill. Can you explain the problem in more detail?

[nathancahill]

Well, it seemed like a CSS issue. However, after wiping node_modules are reinstalling all dependencies, the issue has gone away. So maybe a conflicting storybook file from before.

[rkoberg]

Oh jeez, just wasted a couple hours debugging this after upgrading. Actions don't show up until you click "Action Logger" in the pane.
Ufff... add this to the docs. There is no indication that you need click what looks like the title to the actions pane to see actions show up

[Hypnosphi]

If the actions tab is empty unless you click to its title, it’s a bug

@rkoberg do you have any other addon tabs? Can you take a screenshot of your storybook page when it shows action logger without actions?

[rkoberg]

When this happened, the Actions Logger was the only tab. In other words there is no clicking around. Now that I have multiple tabs, I don't see the behavior. The Actions Logger was the first one I tried. Was banging my head why nothing would show. When I saw the post above (that I quoted using bold for some reason), I clicked the title/tab and actions started to show.

[michaellee8]

I have this issue as well. I have tried clicking "ACTION LOGGER" button but still nothing shown. I decided to use console.log and action in the same time, but only console.log show the result but action results in nothing.

[cuzzins]

Having same issue with a VUE based project, just installed and totally clean and using the demo files. Clicking the button does nothing. No errors in the console either.

[andrerpena]

Having this problem with React now

[patrickmcelwee]

The problem seems to be when &addOnPanel is the final url param and the page is loaded. An extra slash is being appended to the URL.

I believe it is most likely caused when running python -m SimpleHTTPServer. I get this error when running python 2.7.5. I do not get it with python 2.7.13. I believe it is most likely caused by this issue: https://bugs.python.org/issue23112, which was resolved at some point in the 2.7 series.

[Fatal1stZ]

i got this error aswell,
i'm starting storybook via npm and action logger doesn't work
installed python 2.7.13 but it didnt help
any idea why plugin not working?

    "@storybook/addon-actions": "^3.4.6",
    "@storybook/cli": "^3.4.6",
    "@storybook/react": "^3.4.6",

[adyz]

Actions don't work for me neither...

"@storybook/addon-actions": "^3.4.8",
"@storybook/react": "^4.0.0-alpha.10",
"react": "^16.4.1",

"react-dom": "^16.4.1",
"ts-loader": "^4.4.1",

[lcampanis]

Also facing this issue, with no actions being logged.

package.json

    "@babel/cli": "7.0.0-beta.49",
    "@babel/core": "7.0.0-beta.49",
    "@babel/node": "7.0.0-beta.49",
    "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.49",
    "@babel/preset-env": "7.0.0-beta.49",
    "@babel/preset-es2015": "7.0.0-beta.49",
    "@babel/preset-react": "^7.0.0-beta.49",
    "@babel/preset-stage-2": "7.0.0-beta.49",
    "@reactioncommerce/eslint-config": "1.8.0",
    "@storybook/addon-actions": "^4.0.0-alpha.16",
    "@storybook/addon-centered": "^4.0.0-alpha.16",
    "@storybook/addon-knobs": "^4.0.0-alpha.16",
    "@storybook/addon-links": "^4.0.0-alpha.16",
    "@storybook/addon-options": "^4.0.0-alpha.16",
    "@storybook/addon-viewport": "^4.0.0-alpha.16",
    "@storybook/addons": "^4.0.0-alpha.16",
    "@storybook/react": "^4.0.0-alpha.16",
    "babel-bridge": "^1.12.11",
    "babel-core": "^6.26.3",

addon.js

import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-options/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-viewport/register';

[fadomire]

I resolved my issue by using action('test-action')('one') instead of action('test-action')

i did not saw that type of function call anywhere in the doc. i saw it in the code.

[yeou]

I'm seeing the same as @fadomire. Is this correct? Should we update the documentation?

[connebs]

I actually bumped into this issue because my MetaMask extension was intercepting the action calls for some reason. Removed MetaMask and action logs started showing up in the action panel.

[Jack-Barry]

I ran into this on 5.0.11, the fix proposed by @fadomire worked, doesn't even need a parameter just need to call the function.

action('Button was clicked')()

[Hypnosphi]

@fadomire @Jack-Barry can you please share the particular code examples? The result of calling action(name) is indeed a function, and the docs assume that you pass it as an event handler

[Jack-Barry]

import { storiesOf, Story } from '@storybook/vue'
import { action } from '@storybook/addon-actions'

// @ts-ignore
import MyButton from './MyButton.vue'

const stories: Story = storiesOf('Buttons/MyButton', module)

stories.add(
  'Default',
  () => ({
    components: { MyButton },
    methods: {
      logAction() {
        // action('Button was clicked') <- This doesn't work
        action('Button was clicked')()  // This does
      }
    },
    template: `
      <my-button @click="logAction">
        Click Me
      </my-button>`
  })
)

I don't have this project running on the computer I'm at, but the output in the action panel shows 'Button was clicked': [] when calling action('Button was clicked')() if I remember correctly.

[Hypnosphi]

@Jack-Barry does the following work?

...
methods: {logAction: action('Button was clicked')}
...

That's how it's used in official vue examples

[Jack-Barry]

That does work, guess I just overlooked the slight difference in how the functions in methods are declared when using action, since typically I declare functions in methods along the lines of

...
methods: {
  someFunction(someParam) {
    // does things with someParam
  }
}
...

Thanks for pointing that out @Hypnosphi!

[yog3sha]

@Jack-Barry does the following work?

...
methods: {logAction: action('Button was clicked')}
...

That's how it's used in official vue examples

This works for me too. It is almost end of 2020 and sadly still official docs lacks enough examples with vue + TS. Disappointed!

[vmnog]

For me I solved the problem by removing the implementation in my Template.bind({}).args
I setup my storie like that:

// button.stories.ts
export default {
  argTypes: {
      onClick: { action: 'clicked' },
    }
}
...
interface ArgTypes {
  onClick?(e: Event): void;
}
...
// In my case I'm building a design system with Lit and OpenWC, but you get the idea
const Template: Story<ArgTypes> = ({ onClick }: ArgTypes) => html`
  <button-component @click=${onClick}></button-component>
`;
...
export const Default = Template.bind({});

Default.args = {
  onClick: (e) => { console.log(e) } // <-- ❗Remove this implementation, it's overriding the ArgType Action Handler
};

Turn into this:

Default.args = {};

After removing the Default.args.onClick implementation in the button.stories.ts it worked.