Storybook: RC3 - React Components with Children Objects are not valid as a React child

[realmunk]

The bug
Objects are not valid as a React child (found: object with keys {header, content, footer}). If you meant to render a collection of children, use an array instead.

We have quite a few components with props using the pattern named slots projection, which we use in the following way:

children: {
header: React.ReactNode;
content: React.ReactNode;
footer: React.ReactNode;
}

This has been working beautifully up till I recently upgraded to the newest RCs (from beta37). Where we get the following error:

Objects are not valid as a React child (found: object with keys {header, content, footer}). If you meant to render a collection of children, use an array instead. in storyFn in ErrorBoundary Error: Objects are not valid as a React child (found: object with keys {header, content, footer}). If you meant to render a collection of children, use an array instead. in storyFn in ErrorBoundary at traverseAllChildrenImpl (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1038:21) at traverseAllChildren (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1069:14) at mapIntoWithKeyPrefixInternal (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1151:7) at Object.toArray (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1204:7) at parseReactElement (http://localhost:9001/vendors~main.581914fb8eba7be89094.bundle.js:55163:43) at reactElementToJsxString (http://localhost:9001/vendors~main.581914fb8eba7be89094.bundle.js:55627:21) at http://localhost:9001/vendors~main.581914fb8eba7be89094.bundle.js:11456:76 at mapSingleChildIntoContext (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1126:30) at traverseAllChildrenImpl (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:989:9) at traverseAllChildren (webpack://storybook_docs_dll//Users/shilman/projects/baseline/storybook/node_modules/react/cjs/react.development.js?:1069:14)

I tried without the DLL generation … and that doesn’t work either:

Error: Objects are not valid as a React child (found: object with keys {header, content, footer}). If you meant to render a collection of children, use an array instead. in storyFn in ErrorBoundary at traverseAllChildrenImpl (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171615:17) at traverseAllChildren (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171646:10) at mapIntoWithKeyPrefixInternal (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171728:3) at Object.toArray (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171781:3) at parseReactElement (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:164104:43) at reactElementToJsxString (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:164568:21) at http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:14558:76 at mapSingleChildIntoContext (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171703:26) at traverseAllChildrenImpl (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171561:5) at traverseAllChildren (http://localhost:9001/vendors~main.21d3736d4685a0bcddd5.bundle.js:171646:10)

To Reproduce

1. Create a component with children as an object
2. Start storybook
3. Open the story
4. See error

Expected behavior

1. Create a component with children as an object
2. Start storybook
3. Open the story
4. See story as usual

System:
Environment Info:

System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
Yarn: 1.22.4 - /usr/local/Cellar/yvm/3.6.7/shim/yarn
npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
Browsers:
Chrome: 83.0.4103.116
Firefox: 78.0.1
Safari: 13.1.1

[shilman]

Which version of React are you using?

[realmunk]

After updating to the newest RC, this is not an issue. Thanks for your great work.

[carl32crc]

Hi, same issue but me case is React version is 16.13.1, @storybook/react 6.0.16, not works when pass args. Sample:

This sample works fine:

const storySample = () => <Component>{{ header: <Header/>, content: <Content/> }}</Component>

But this case not works for me when pass arguments:

const Sample = (args) => <Component {...args}>{{ header: <Header/>, content: <Content/> }}</Component>

Sample.args = { backgroundColor: '#6CC5A5', color: '#fff', title: 'Default title' }

The bug only in second case show this similar message:

Objects are not valid as a React child (found: object with keys {header, content}). If you meant to render a collection of children, use an array instead.
in storyFn
in ErrorBoundary

Thx!!

[shilman]

@carl32crc As a workaround you can set the docs.source.type story parameter to 'code'.

[carl32crc]

Thanks @shilman ! Finally works fine!!