[Bug]: Switcher element crashes application when a react fragment is passed as a child

[ychavoya]

Package

@carbon/react

Browser

Chrome, Firefox

Package version

> v1.42.1

React version

v18.2.0

Description

When you add a React Fragment as a direct child of the <Switcher> component, the application crashes with the following error in the console:

Uncaught TypeError: WeakMap key Symbol.for("react.fragment") must be an object

Example in v1.42.1 where it was working
https://stackblitz.com/edit/github-jhr7bv?file=src%2FApp.jsx

Reproduction/example

https://stackblitz.com/edit/github-jhr7bv-rzbbuj?file=src%2FApp.jsx

Steps to reproduce

• Add a <Switcher> component
• Add a React Fragment with other things inside <></>
• Check the console for errors

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[2nikhiltom]

Hey @ychavoya ,

The currently purpose of Switcher is to provides a way for the user to easily navigate between products and systems and expects a SwitcherItem as its direct child and SwitcherItem is expected to have a link/href to redirect somewhere when clicked

Instead of modifying the Switcher component to accommodate this, it makes more sense for consumers to use a custom function or a package to flatten the array. One of the package could be react-keyed-flatten-children

react-keyed-flatten-children package makes sure that it flatten arrays and React.Fragments into a regular, one-dimensional array while ensuring element and fragment keys are preserved, unique, and stable between renders

What are your thoughts ?

[ychavoya]

Thanks @2nikhiltom, I understand the component is not actually intended to use fragments as children, we actually fixed our code by removing them.

The main purpose of me raising this issue was because the application crashes completely when you do this without a clear indication that this is the issue unless you examine closer.

If the solution makes the code too complex, would you think it useful to set the allowed children (SwitcherItem instead of any node) in the prop types so it shows a warning on code?