Describe the bug
Knobs date() throws Maximum Call Stack Exceeded error in Angular. I am able to see the output of the knobs date for a split second before the error is thrown.
To Reproduce
import { storiesOf } from '@storybook/angular';
import { date as knobDate } from '@storybook/addon-knobs/angular'; // also tried @storybook/addon-knobs
const stories = storiesOf("Simple Components|Date", module);
stories.add("Test", () => {
const date = knobDate("test date", new Date("2019-01-01")); // this line throws the error
return ({
template: "<label>{{date}}</label>",
props: {
date
}
});
});
Errors:
Uncaught RangeError: Maximum call stack size exceeded
at JSON.stringify (<anonymous>)
at stringify (vendors~main.2918c86addf666b280ef.bundle.js:64164)
at PostmsgTransport.send (vendors~main.2918c86addf666b280ef.bundle.js:25660)
at handler (vendors~main.2918c86addf666b280ef.bundle.js:25841)
at Channel.emit (vendors~main.2918c86addf666b280ef.bundle.js:25850)
at Object.error (vendors~main.2918c86addf666b280ef.bundle.js:4340)
at console.logger.error (vendors~main.2918c86addf666b280ef.bundle.js:12287)
at warningWithoutStack (vendors~main.2918c86addf666b280ef.bundle.js:86139)
at warnAboutInvalidUpdates (vendors~main.2918c86addf666b280ef.bundle.js:102979)
at scheduleWorkToRoot (vendors~main.2918c86addf666b280ef.bundle.js:104259)
...
Uncaught RangeError: Maximum call stack size exceeded
at Array.splice (<anonymous>)
at Object.<anonymous> (vendors~main.2918c86addf666b280ef.bundle.js:64178)
at JSON.stringify (<anonymous>)
at stringify (vendors~main.2918c86addf666b280ef.bundle.js:64164)
at PostmsgTransport.send (vendors~main.2918c86addf666b280ef.bundle.js:25660)
at handler (vendors~main.2918c86addf666b280ef.bundle.js:25841)
at Channel.emit (vendors~main.2918c86addf666b280ef.bundle.js:25850)
at Object.error (vendors~main.2918c86addf666b280ef.bundle.js:4340)
at console.logger.error (vendors~main.2918c86addf666b280ef.bundle.js:12287)
at warningWithoutStack (vendors~main.2918c86addf666b280ef.bundle.js:86139)
...
The above error occurred in the <Context.Consumer> component:
in Styled(div) (created by ForwardRef)
in ForwardRef (created by DateType)
in DateType (created by PropForm)
in label (created by Context.Consumer)
in Styled(label) (created by ForwardRef)
in ForwardRef (created by Field)
...
Expected behavior
Don't throw an error
System:
"@storybook/addon-knobs": "^4.1.4"
"@storybook/angular": "^4.1.4"
I get the same exact errors thrown with React with:
"react": "^16.4.1",
"@storybook/addon-actions": "^4.1.7",
"@storybook/addon-console": "^1.1.0",
"@storybook/addon-knobs": "^4.1.7",
"@storybook/addons": "^4.1.7",
"@storybook/react": "^4.1.7"
It seems to only occur when both @storybook/addon-knobs and @storybook/addon-actions are registered in the addons config. Removing @storybook/addon-action makes the knobs work again.
@eslaurente thanks for the tip. I also had actions registered. It's easier to live without actions than it is to parse a text knob into a date, so this may be the workaround I have to use until this is fixed
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
This is still an issue, I can't get actions to work with knobs. I recommend creating a demo that imports all the official addons in this repo to avoid clashes in the future.
@mikestaub is this an issue in SB5?
Yes
@mikestaub We have such a demo and the date knobs is working AFAICT: https://storybooks-angular.netlify.com/?path=/story/addon-knobs--all-knobs
The example you linked is not using the actions addon, but rather the internal ActionBar component: https://github.com/storybooks/storybook/blob/next/lib/components/src/ActionBar/ActionBar.stories.js#L36
I created a minimal example to reproduce the bug, please see here: https://github.com/mikestaub/storybook-example-bug
@mikestaub storybooks-angular is using the both the actions and knobs addons. Your repo is using actions but not knobs, and it's react not angular. 馃槙
Yes so perhaps this is a different bug than the original reported one. But even with just the actions addon I still get a 'stack exceeded' error.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
I'm also experiencing this issue. Even when I delete all of my stories and run an empty Storybook I'm getting the Uncaught RangeError: Maximum call stack size exceeded error.
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!
Hi, I still experience this issue and have seen it both in storybook v4 and v5. Did any of you manage to figure out how to solve this issue?
Most helpful comment
I get the same exact errors thrown with React with:
It seems to only occur when both
@storybook/addon-knobsand@storybook/addon-actionsare registered in the addons config. Removing@storybook/addon-actionmakes the knobs work again.