Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Function defined in component.ts throws error "ERROR TypeError: _co.functionName is not a function" when called from storybook #14693

Closed
abhi9bakshi opened this issue Apr 22, 2021 · 1 comment

Comments

@abhi9bakshi
Copy link

abhi9bakshi commented Apr 22, 2021

Describe the bug
I have defined a function to toggle text in my storybook component. On calling the function from button, application throws error
"ButtonComponent.html:1 ERROR TypeError: _co.toggleLabel is not a function".

This error occurs only if I launch my application directly to that story URL, or reload page when that URL is already loaded. If I launch app at a different story URL and then visit the button story, the toggleLabel function gets called correctly.

Inspecting the code shows that when we load the application directly to the URL, args passed to Button.stories.ts at

const Template: Story<Button> = (args: Button) => ({
  props: args,
});

are

{
    backgroundColor: undefined
    hideLabel: undefined
    label: "Button"
    onClick: ƒ actionHandler()
    primary: false
    size: "medium"
    toggleLabel: undefined
}

However, args passed when we visit the URL after application is loaded at different URL are

{
    label: "Button"
    onClick: ƒ actionHandler()
    primary: true
    size: "medium"
}

Due to which the function defined in button.component.ts gets called.

To Reproduce
You can clone the repo for error reproduction here and rpm run storybook on master branch to reproduce the issue. The bugfix branch provides a temporary fix by deleting undefined keys from args using

Object.keys(args).forEach((e) => {
    if (args[e] === undefined) delete args[e];
});

System

System:
    OS: macOS 11.2.3
    CPU: (4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.85
    Firefox: 83.0
    Safari: 14.0.3
  npmPackages:
    @storybook/addon-actions: ^6.2.8 => 6.2.8 
    @storybook/addon-essentials: ^6.2.8 => 6.2.8 
    @storybook/addon-links: ^6.2.8 => 6.2.8 
    @storybook/angular: ^6.2.8 => 6.2.8
@shilman
Copy link
Member

shilman commented Apr 23, 2021

closing as dupe to #14147

@shilman shilman closed this as completed Apr 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants