Cannot read properties of undefined (reading 'onClick')

[aLosada7]

Hi everyone. I'm reciving the following error:

Cannot read properties of undefined (reading 'onClick')

TypeError: Cannot read properties of undefined (reading 'onClick')
    at http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:5796:27
    at Array.reduce (<anonymous>)
    at inferActionsFromArgTypesRegex (http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:5791:32)
    at http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:17475:51
    at Array.reduce (<anonymous>)
    at StoryStore.addStory (http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:17474:45)
    at Object.api.add (http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:15802:27)
    at http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:30971:16
    at Array.forEach (<anonymous>)
    at http://localhost:4400/vendors-node_modules_babel_runtime_helpers_taggedTemplateLiteralLoose_js-node_modules_emotion-cc8667.iframe.bundle.js:30964:20

This error comes from my tsx component Menu button which is the following:

import { SerializedStyles } from '@emotion/react';
import { ButtonHTMLAttributes, HTMLAttributes, useState } from 'react';
import { Props } from '../../../helpers';
import { menu, menuLine, menuOpen } from './styles';

export interface MenuButtonProps extends Props {
    isActive?: boolean;
    onClick?: (active: boolean) => void;
    variant: 'light' | 'dark';
    'aria-label': string;
    cssOverrides?: any;
}

export const MenuButton = ({
    isActive = false,
    onClick = () => undefined,
    variant,
    cssOverrides,
    ...props
}: MenuButtonProps) => {
    const [active, setActive] = useState(isActive);
    return (
        <button
            css={[menu, cssOverrides]}
            onClick={() => {
                setActive(!active);
                onClick(active);
            }}
            aria-label={props['aria-label']}
        >
            <div css={[menuLine(variant), active ? menuOpen : '']}></div>
        </button>
    );
};

I am running this simple story.

import { useState } from 'react';

import { MenuButton, MenuButtonProps } from './MenuButton';
import { asPlayground, asChromaticStory } from '../../../../lib/story-intents';
import type { Story } from '../../../../lib/storybook-emotion-10-fixes';

export default {
    title: 'Components/Navigation/Menu Button',
    component: MenuButton,
};

const Template: Story<MenuButtonProps> = (args) => {
    const [isNavOpen, setNavOpen] = useState(false);
    return (
        <div style={{ margin: '2rem' }}>
            <MenuButton
                onClick={() => {
                    setNavOpen(!isNavOpen);
                }}
                {...args}
            />
        </div>
    );
};

export const Default = Template.bind({});
asChromaticStory(Default);

Some help will be appreciated. Thanks.

[moog16]

Can you post your package.json? I'm betting one of your versions w/ storybook addons are out of sync.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).