[material-ui][Box] Box throws an error when there is a RSC (React Server Component) as a child

[mr-rpl]

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/devbox/fragrant-forest-gn5rr6?file=%2Fsrc%2Fapp%2Fpage.tsx%3A1%2C1

import { Box } from '@mui/material'

async function FooBar() {
  return <Box>foobar</Box>
}

export default function Page() {
  return (
    <Box>
      <FooBar />
    </Box>
  )
}

Current behavior 😯

Throws the following error:

app-index.js:32 Warning: Failed prop type: Invalid prop children supplied to ForwardRef(Box), expected a ReactNode.

Expected behavior 🤔

Not error =D

Context 🔦

Absolutely love MUI, but this is preventing us from using it in server components

Your environment 🌎

System:
OS: macOS 13.6
Binaries:
Node: 18.17.0 - ~/.nodenv/versions/18.17.0/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.6.7 - ~/.nodenv/versions/18.17.0/bin/npm
Browsers:
Chrome: 119.0.6045.159
Edge: Not Found
Safari: 16.6

[sadik-malik]

Getting the prop type warning for Box component. https://codesandbox.io/p/sandbox/fragrant-forest-gn5rr6?file=%2Fsrc%2Fapp%2Fpage.tsx%3A1%2C1

 Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode.

[mj12albert]

This is the PropType that's causing the error: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Box/Box.js#L26

I guess we could change it to oneOfType but I'm not sure what it should be 🤔

I believe this doesn't work in "plain" react, only in Next.js:

async function FooBar() {
  return <Box>foobar</Box>
}

export default function Page() {
  return (
    <Box>
      <FooBar />
    </Box>
  )
}

[sadik-malik]

@mj12albert I was wondering if prop-types package supports the pattern of using RSC as a child.

[gentlementlegen]

Can confirm it happens, and not only with Box but other components too. However there don't seem to be any issue, beyond the error in the console itself, everything behaves as expected.
If you wrap the server component within a regular div such as:

<Box>
    <div>
        <MyServerComponent />
    </div>
</Box>

the error goes away. Not ideal because of the useless extra div, but works fine so far.

[naoki-kiryu-lvgs]

I found another solution based on @FernandVEYRIER one, without extra div element.

1. Create an wrapper component

'use client';

import React from 'react';

export const ClientToServer: React.FC<{
  children: React.ReactNode;
}> = ({ children }) => {
  return <>{children}</>;
};

2. Just wrap your server component with a wrapper

<Box>
    <ClientToServer>
        <MyServerComponent />
    </ClientToServer>
</Box>

[siriwatknp]

This is the PropType that's causing the error: https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Box/Box.js#L26

I guess we could change it to oneOfType but I'm not sure what it should be 🤔

I believe this doesn't work in "plain" react, only in Next.js:

async function FooBar() {
  return <Box>foobar</Box>
}

export default function Page() {
  return (
    <Box>
      <FooBar />
    </Box>
  )
}

How about changing it to any?

[siriwatknp]

Please see facebook/prop-types#407

[oliviertassinari]

We could:

• report the bug to Next.js. It seems to be the root problem. They didn't correctly udpate react-is
• skip the proptypes generation for they children prop, until Next.js fix it.