react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

RAC TableBody with Suspense errors on SSR

Open herkulano opened this issue 2 months ago โ€ข 3 comments

Provide a general summary of the issue here

Having a Suspense in the TableBody throws an error while SSR

<Table>
  <TableHeader>...</TableHeader>
  <Suspense fallback={<TableBody renderEmptyState={() => (<div>Loading...</div>)}/>}>
    <UsersTableBody users={users} />
  </Suspense>
</Table>

๐Ÿค” Expected Behavior?

The TableBody should be able to be wrapped in a Suspense boundary.

๐Ÿ˜ฏ Current Behavior

It throws:

TypeError: node.render is not a function
    at children (file:///home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-aria-components/dist/Collection.mjs:57:33)
    at eval (file:///home/projects/github-cz6w3qva-7q9bvjmd/node_modules/@react-aria/collections/dist/useCachedChildren.mjs:40:32)
    at Object.useMemo (/home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-dom/cjs/react-dom-server.node.development.js:4027:20)
    at process.env.NODE_ENV.exports.useMemo (/home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react/cjs/react.development.js:1251:34)
    at $e948873055cbafe4$export$727c8fc270210f13 (file:///home/projects/github-cz6w3qva-7q9bvjmd/node_modules/@react-aria/collections/dist/useCachedChildren.mjs:34:31)
    at $7135fc7d473fd974$var$useCollectionRender (file:///home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-aria-components/dist/Collection.mjs:51:58)
    at CollectionRoot (file:///home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-aria-components/dist/Collection.mjs:44:16)
    at Object.react_stack_bottom_frame (/home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-dom/cjs/react-dom-server.node.development.js:10288:18)
    at renderWithHooks (/home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-dom/cjs/react-dom-server.node.development.js:5298:19)
    at renderElement (/home/projects/github-cz6w3qva-7q9bvjmd/node_modules/react-dom/cjs/react-dom-server.node.development.js:5733:23)

๐Ÿ’ Possible Solution

No response

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

https://stackblitz.com/edit/github-cz6w3qva-7q9bvjmd?file=app%2Fcomponents%2Fuser-table.tsx

It only happens on SSR, if you navigate to the route with the link it works as expected, but if you refresh the page in the route /table-suspense it throws the error.

Version

1.13.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

herkulano avatar Oct 06 '25 15:10 herkulano