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: {