From e45688d5ba431ff321b0b041138fcb5af03b5409 Mon Sep 17 00:00:00 2001
From: Siriwat K <siriwatkunaporn@gmail.com>
Date: Tue, 17 Sep 2024 16:22:10 +0700
Subject: [PATCH] [Grid] ignore RSC error (#233)

---
 packages/pigment-css-react/src/Grid.jsx            | 14 ++++++++++----
 .../tests/Grid/fixtures/Grid.output.js             | 14 ++++++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/packages/pigment-css-react/src/Grid.jsx b/packages/pigment-css-react/src/Grid.jsx
index fef1c22c..edf10101 100644
--- a/packages/pigment-css-react/src/Grid.jsx
+++ b/packages/pigment-css-react/src/Grid.jsx
@@ -8,10 +8,16 @@ import { generateAtomics } from './generateAtomics';
 import styled from './styled';
 
 function isGridComponent(element) {
-  // 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';
+  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 (error) {
+    // 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;
+  }
 }
 
 const gridAtomics = generateAtomics(({ theme }) => {
diff --git a/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js b/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
index 31de9307..1ef8c27b 100644
--- a/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
+++ b/packages/pigment-css-react/tests/Grid/fixtures/Grid.output.js
@@ -7,10 +7,16 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 function isGridComponent(element) {
-  // 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';
+  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 (error) {
+    // 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;
+  }
 }
 const gridAtomics = /*#__PURE__*/ _atomics({
   styles: {