Skip to content

RAC TableBody with Suspense errors on SSR #8976

@herkulano

Description

@herkulano

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingssr

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions