[Datagrid] - Nested rows in Datagrid is broken in React 17

jeesonjohnson commented 2 months ago

Package

Carbon for IBM Products

Description

When using nestedRows within the DataGrid component in React 17, the application crashes on expansion of the rows. We think that this was introduced in the release 2.48.0. The error that we see can be seen below:

Uncaught Error: Cell(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
    at reconcileChildFibers2 (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:10932:29)
    at reconcileChildren (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:13095:37)
    at mountIndeterminateComponent (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:13724:13)
    at beginWork (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:14497:22)
    at HTMLUnknownElement.callCallback2 (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:3899:22)
    at Object.invokeGuardedCallbackDev (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:3924:24)
    at invokeGuardedCallback (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:3958:39)
    at beginWork$1 (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:17658:15)
    at performUnitOfWork (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:16881:20)
    at workLoopSync (/node_modules/.vite/deps/chunk-HAIV5P5B.js?v=88ffb8f4:16835:13)

This is a mission critical error, as users are not able to use the nestedRows on React17. This causes our whole app to crash.

Component(s) impacted

DataGrid component

Browser

Chrome, Safari, Firefox, Microsoft Edge

@carbon/ibm-products (previously @carbon/ibm-cloud-cognitive) version

2.48.0

Suggested Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Product/offering

IBM Cloud Pak for Integration (CP4I)

CodeSandbox or Stackblitz example

See Here

Steps to reproduce the issue (if applicable)

Go to the codesandbox. Expand out all the expandable rows. The app should crash. See video for example in React 17.

https://github.com/user-attachments/assets/da401f7f-62d4-4f3d-8070-2d9f072da57a

Release date (if applicable)

No response

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate issues

sean-anderson-ibm commented 2 months ago

This is also broken with react 16.

matthewgallo commented 2 months ago

This is a duplicate of https://github.com/carbon-design-system/ibm-products/issues/5986, but the bits about this occurring in previous react versions is very helpful. I've created a reproduction and will look at this. See @flannanl's workaround in #5986 until we address this further.

https://stackblitz.com/edit/github-gkxha8?file=package.json,src%2Fmain.jsx,src%2FExample%2FExample.jsx

carbon-design-system / ibm-products