Controls: ReactNode type prop crashes Storybook when trying to enter arbitrary values in the corresponding control

[thesobercoder]

Describe the bug
I have a component, which exposes a prop like footer: React.ReactNode. This prop is rendered as a text control with some JSON values populated if I pass any JSX as an argument. This the first problem. The second problem is if I try to remove all the text in the control and type something of my own, then Storybook crashes and shows me this error message.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/thesobercoder/Graphite and clone the repo
2. Run yarn && yarn sb
3. Navigate to ./apps/explorer/src/stories/GCard.stories.tsx to view the sourcecode if needed
4. Visit http://localhost:4400/?path=/story/card--with-footer
5. Find the footer control and delete the text and try to write some HTML/text.
6. Then delete the entire text and see the error popup

Expected behavior
The error shouldn't be thrown and there should be a better way to represent props of type ReactNode instead of a complex JSON.

Screenshots

Code snippets
Included in the repo https://github.com/thesobercoder/Graphite

System

System:
    OS: Linux 4.19 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Binaries:
    Node: 15.4.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.0.15 - /usr/bin/npm
  npmPackages:
    @storybook/addon-controls: ^6.1.11 => 6.1.11
    @storybook/addon-docs: ^6.1.11 => 6.1.11
    @storybook/addon-essentials: ^6.1.11 => 6.1.11
    @storybook/addon-knobs: ^6.1.11 => 6.1.11
    @storybook/addon-storysource: ^6.1.11 => 6.1.11
    @storybook/react: ^6.1.11 => 6.1.11

Additional context
The project is bootstrapped with nx.

[Fiszcz]

The problem is that empty value for field is changed into {}. for ReactNode type

I wrote simple wrapper for Storybook story to handle all {} objects and change them into empty string "" (empty string in most cases can't crash whole story).

function StorybookStory<T extends object>(a: Story<T>): Story {
    return (args, context) => {
        const replaceObjectIntoString = (arg: any) => (arg && Object.keys(arg).length === 0 && arg.constructor === Object) ? "" : arg;
        const mappedArgs = Object.fromEntries(Object.entries(args).map(([key, value]) => [key, replaceObjectIntoString(value)]));
        return a(mappedArgs as T, context);
    }
}

export const Basic = StorybookStory<FieldSelectProps>((props) => {
    return (
        <OurComponent {...props} />
    );
});

[shilman]

should be solved by #11429 or #13888

[ghengeveld]

Because JSX isn't serializable (by telejson), such values cannot be used as args. The workaround is to use a mapping.

[mamta-msys]

@thesobercoder were you able to fix your issue?