[Bug]: When slot with children is used then error/warning is shown: React.jsx: Static children should always be an array.

[vlaskal]

Library

React Components / v9 (@fluentui/react-components)

System Info

PS C:\Projects\fluent-ui-jsx-runtime> npx envinfo --system --npmPackages '{@fluent/*}' --browsers
Need to install the following packages:
  envinfo@7.10.0
Ok to proceed? (y)

  System:
    OS: Windows 10 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
    Memory: 5.75 GB / 31.79 GB
  Browsers:
    Edge: Spartan (44.22621.2262.0), Chromium (116.0.1938.69)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

no

Reproduction

https://github.com/vlaskal/fluent-ui-v9-jsx-runtime-issue

Bug Description

I want to customize AccordionHeader component via Slot API when we want to override default rendering of button slot. I followed the documentation Replacing-the-entire-slot and I came with the following code:

const headerRenderer = (Inner, innerProps) => {
    return (
        <>
            <Inner {...innerProps} />
            <div ... >
                <Button ... >Insert</Button>
            </div>
        </>
    );
}
<AccordionHeader button={{ children: headerRenderer }} ... > ... </AccordionHeader>

More can be found in InsertItem.tsx file in linked repository.

This code works as expected in production build and also works without any problems in development build npm run dev on Vite + React based project till version 9.30.1 of @fluentui/react-components package. To be more precise, it works without issue till version 9.3.7of @fluentui/react-accordion package.

Actual Behavior

In version 9.30.2 of @fluentui/react-components respectively 9.3.8 of @fluentui/react-accordion and later is behavior change in development build. Browser Console log is flooded by following error:

Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:35834:17
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14299:17
    at InsertItem (http://localhost:5174/src/InsertItem.tsx:27:21)
    at InsertActionItem1
    at Provider2 (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:2730:43)
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14202:17
    at App
    at div
    at TextDirectionProvider (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:13884:3)
    at http://localhost:5174/node_modules/.vite/deps/@fluentui_react-components.js?v=40c2882c:1309:17

Application works fine but any other errors or warnings are hidden by them. You can check it in attached repository project by following steps:

• npm install
• npm run dev
• Open application in browser
• Open console log in browser
• Refresh it
• A lot of errors are generated

Expected Behavior

Development build will not produce additional errors or warnings as was in versions 9.30.1 of @fluentui/react-components respectively 9.3.7 of @fluentui/react-accordion.

This behavior can be checked in attached repository project by following steps:

• Update version of @fluentui/react-accordion package to 9.3.7
• npm install
• npm run dev
• Open application in browser
• Open console log in browser
• Refresh it
• No errors are generated

Additional Info

I think following PRs #28943, #28959 and #28962 can be source of changed behaviour.

Logs

installHook.js:251 
 Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:35834:17
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14299:17
    at InsertItem (http://localhost:5174/src/InsertItem.tsx:27:21)
    at InsertActionItem1
    at Provider2 (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:2730:43)
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14202:17
    at App
    at div
    at TextDirectionProvider (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:13884:3)
    at http://localhost:5174/node_modules/.vite/deps/@fluentui_react-components.js?v=40c2882c:1309:17
react-jsx-runtime.development.js:87 
 Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:35834:17
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14299:17
    at InsertItem (http://localhost:5174/src/InsertItem.tsx:27:21)
    at InsertActionItem2
    at Provider2 (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:2730:43)
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14202:17
    at App
    at div
    at TextDirectionProvider (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:13884:3)
    at http://localhost:5174/node_modules/.vite/deps/@fluentui_react-components.js?v=40c2882c:1309:17
installHook.js:251 
 Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:35834:17
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14299:17
    at InsertItem (http://localhost:5174/src/InsertItem.tsx:27:21)
    at InsertActionItem2
    at Provider2 (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:2730:43)
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14202:17
    at App
    at div
    at TextDirectionProvider (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:13884:3)
    at http://localhost:5174/node_modules/.vite/deps/@fluentui_react-components.js?v=40c2882c:1309:17
react-jsx-runtime.development.js:87 
 Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:35834:17
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14299:17
    at InsertItem (http://localhost:5174/src/InsertItem.tsx:27:21)
    at InsertActionItem3
    at Provider2 (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:2730:43)
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14202:17
    at App
    at div
    at TextDirectionProvider (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:13884:3)
    at http://localhost:5174/node_modules/.vite/deps/@fluentui_react-components.js?v=40c2882c:1309:17
installHook.js:251 
 Warning: React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:35834:17
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14299:17
    at InsertItem (http://localhost:5174/src/InsertItem.tsx:27:21)
    at InsertActionItem3
    at Provider2 (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:2730:43)
    at div
    at http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:14202:17
    at App
    at div
    at TextDirectionProvider (http://localhost:5174/node_modules/.vite/deps/chunk-4OIPOZFD.js?v=c1559de4:13884:3)
    at http://localhost:5174/node_modules/.vite/deps/@fluentui_react-components.js?v=40c2882c:1309:17


Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

Made a simpler repro: https://codesandbox.io/s/long-frog-y2c8qf?file=/example.tsx
It's clearly a bug that should be fixed.

[vlaskal]

Thanks for confirmation.

[barisbikmaz]

FYI: Same problem with Dropdown and its button slot

<Dropdown 
  button={{
    children: () => { return <>Boom</>; },
  }}
>...</Dropdown>

I've also noted that the typings for the slot are not allowing this. I don't know if the typings are incorrect because it works.

[vlaskal]

@barisbikmaz

FYI: Same problem with Dropdown and its button slot

I think it is in all components because they use Slot API with a new type of JSX compilation.

I've also noted that the typings for the slot are not allowing this. I don't know if the typings are incorrect because it works.

Yep, I would like to know as well how to properly type it. There is also another opened issue (#27090) with same question.

[bsunderhus]

I think it is in all components because they use Slot API with a new type of JSX compilation.

Yes @vlaskal it is on all v9 components, as they're all using a custom new runtime, I'll investigate this issue.

Yep, I would like to know as well how to properly type it. There is also another opened issue (#27090) with same question.

This is an old issue when it comes to a common problem with typescript and JSX regarding unions, as you can see in this example here:

expandIcon definition is based on a single native element type (span), meanwhile button is based on an union of properties (button and a element + some custom properties).

This problem will be present in every single slot definition that ends up being an union of types.

In current react v17 version support if you explicitly type the Element and props arguments this problem is resolved.