Storybook 6.0 children args break if value is empty

[lifeiscontent]

Describe the bug
if I set my children arg to no value, the entire story breaks.

[lifeiscontent]

@shilman did this get fixed?

[shilman]

Not explicitly. But maybe ... there have been lots of improvements since this was filed. Can you provide a repro in official-storybook for me to look at?

[stale]

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!

[stale]

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!

[cabello]

Hi,

Not sure if related but I saw the following issue.

The following works and renders well:

Card.args = {
  children: 'Hello',
};

The following breaks:

Card.args = {
  children: <Paragraph>Hello</Paragraph>,
};

Results in:

Maximum call stack size exceeded
RangeError: Maximum call stack size exceeded
    at mapValues (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/lodash/mapValues.js?:34:19)
    at inferType (http://localhost:6006/vendors~main.3ac77e73d8b04b576592.bundle.js:53680:48)
    at http://localhost:6006/vendors~main.3ac77e73d8b04b576592.bundle.js:53681:14
    at eval (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/lodash/mapValues.js?:38:34)
    at eval (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/lodash/_createBaseFor.js?:18:11)
    at baseForOwn (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/lodash/_baseForOwn.js?:14:20)
    at mapValues (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/lodash/mapValues.js?:37:3)
    at inferType (http://localhost:6006/vendors~main.3ac77e73d8b04b576592.bundle.js:53680:48)
    at http://localhost:6006/vendors~main.3ac77e73d8b04b576592.bundle.js:53681:14
    at eval (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/lodash/mapValues.js?:38:34)

Paragraph in this case is a styled component:

import styled from '@emotion/styled';

export const Paragraph = styled.p``

Does that help with reproduction?

🙇

[shilman]

@cabello currently all arg values must be JSON-serializable values

Related: #11429

@jonniebigodes i wonder whether there's a good documentation fix for this short term

[maxzirps]

Though this works in React, this fails in Preact

export const Multi = ({hint}) => <div>{hint}</div>

export const Template = (args) => (
  <Multi
    hint={args.hint}
  />
);

<Canvas>
  <Story name="MultiBoy" args={{ hint: <div>hello</div> }}>
    {Template.bind({})}
  </Story>
</Canvas>

RangeError: Maximum call stack size exceeded
    at http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:139985:18
    at baseForOwn (http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:137923:20)
    at mapValues (http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:144489:3)
    at inferType (http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:26122:48)
    at http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:26123:14
    at http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:144490:34
    at http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:139993:11
    at baseForOwn (http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:137923:20)
    at mapValues (http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:144489:3)
    at inferType (http://localhost:4400/vendors~main.6a07754c95c36a1d2035.bundle.js:26122:48)

[shilman]

Arg values should be JSON serializable (ish) @maxzirps

[stale]

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!

[ghengeveld]

Closing this for lack of a reproduction. I wasn't able to break Storybook by nullifying a required arg.

JSX is not supported as arg value. Use a mapping instead.