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

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:

    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® Core™ 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]

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

[realmunk]

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