storybook: [addon-knobs] Knobs Date Throws "Maximum Call Stack" Error for Angular (Conflict with addon-actions)

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”

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 15 (3 by maintainers)

Most upvoted comments

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.

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?

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.