[Grid] ignore RSC error

[siriwatknp]

closes mui/material-ui#43635

This is a temporary fix, which might not cover an edge case if the consumer use client component as a child of Grid container.

However, this fix should work for normal use cases because a Grid container should always have Grid item.

• I have followed (at least) the PR section of the contributing guide.

[DiegoAndai]

Thanks for taking this @siriwatknp.

The solution doesn't work for this case: https://mui.com/material-ui/react-grid2/#inheriting-columns. For that use case to work, a grid item must forward its parent column and spacing values, which won't work if we check for the container prop.

What do you think about something like this?:

function isGridComponent(element) {
  try {
    // For server components `muiName` is avaialble in element.type._payload.value.muiName
    // relevant info - https://github.com/facebook/react/blob/2807d781a08db8e9873687fccc25c0f12b4fb3d4/packages/react/src/ReactLazy.js#L45
    // eslint-disable-next-line no-underscore-dangle
    return element.type.muiName === 'Grid' || element.type?._payload?.value?.muiName === 'Grid';
  } catch {
    // Covers for the case in which the parent is a server component and the child is a client component
    // https://github.com/mui/material-ui/issues/43635
    return false
  };
}

Would this work? It would fail silently, but maybe we can add a callout on the docs about this case.

We should also catch only this specific error and not others.

[siriwatknp]

What do you think about something like this?:

You proposal works! I will go with your proposal.

[DiegoAndai]

Can we check for the specific error so we don't catch unintended ones?

if (error.message.startsWith("Cannot access default.muiName on the server.") {
  // Covers for the case in which the Grid is a server component and the child is a client component
  // https://github.com/mui/material-ui/issues/43635
  return false;
} else {
  throw error
}

[siriwatknp]

Are you sure, the message check is quite fragile. Given the size of the function, eventhough it catches, I think it's still better than checking message.

cc @brijeshb42

[brijeshb42]

Just speculating. Is there some way we can also give this control to the user so they can customize this if the error criteria changes in the future?