"Using a Function As <Admin> Child" gives "not assignable to type 'ReactNode'.ts(2322)" with @types/react 18

[psam44]

A typescript error appears on:

<Admin ...>
  {fetchResources}
</Admin>

Type '(permissions: Permissions) => JSX.Element[]' is not assignable to type 'ReactNode'.ts(2322)
App.tsx(119, 9): Did you mean to call this expression?
const fetchResources: (permissions: Permissions) => JSX.Element[]

This happens with an upgrade to @types/react@18.2.51

It was fine before, with @types/react@17.0.43

Workaround:

• (more to prouve the origin of the problem):
  Add into node_modules\@types\react\index.d.ts, for type ReactNode =:

        | {}

This option was removed in v18, as stated in Remove {} from ReactFragment

• Mute the error:

<Admin ...>
  {
    // @ts-expect-error
    fetchResources}
</Admin>

Environment

• React-admin version: 4.16.9
• React version: 18.2.0
• typescript@5.3.3

[slax57]

Thanks for the report.
Can you please provide a reproduction sandbox?

[psam44]

I did nothing, just clicked on your link and opened the index.tsx file:

Noticeable in yarn.lock:
"@types/react@*":
version "18.2.8"

[psam44]

May be a hint, with what is usually children: AdminChildren, in ra-ui-materialui\src\theme\ThemeProvider.tsx:

export interface ThemeProviderProps {
    children: ReactNode;

and so on, deeper in @mui/material/styles.

[slax57]

Indeed, it can be reproduced straight from the sandbox! 😅
We'll look into it, thanks!

It's also worth mentioning that this may have been fixed already on the next branch, since we upgraded our monorepo to use React 18 for the upcoming v5.

We need to check whether this fix could be applied to the master branch too, or if it requires a breaking change.