Incompatability after MUI v6 update

[futurethang]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
I use MUI Icon components within toasts, but after updating to MUI v6, I get a number of errors

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
I can't replicate easily in Codepen, but can provide context. My Toast wrapper code looks like:

import React from 'react';
import { CSSProperties, ReactElement, ReactNode } from 'react';
import { toast } from 'react-toastify';
import { useTheme } from '@mui/material';
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined';
import ErrorOutlineOutlinedIcon from '@mui/icons-material/ErrorOutlineOutlined';
import CloseOutlinedIcon from '@mui/icons-material/CloseOutlined';
export type CustomToastTypes = 'error' | 'success';
interface UseCustomToastRes {
  addToast: (newToast: ReactElement | string, toastType: CustomToastTypes) => void;
}

const useCustomToast: () => UseCustomToastRes = () => {
  const theme = useTheme();
  const toastStyles: Record<CustomToastTypes, { styles: CSSProperties; icon: ReactNode }> = {
    success: {
      styles: {
        background: theme.customPalette.backgroundColors.toasterSuccessBg,
        color: theme.customPalette.textColors['SecondaryGreen/50'],
        border: `1px solid ${theme.customPalette.borderColors.toasterSuccessBorder}`,
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: `${theme.customPalette.borderColors.toasterSuccessBorder}`,
        boxShadow: 'none',
        borderRadius: 0,
      },
      icon: (
        <CheckCircleOutlinedIcon
          sx={{ color: theme.customPalette.textColors['SecondaryGreen/50'] }}
        />
      ),
    },
    error: {
      styles: {
        background: theme.customPalette.backgroundColors.toasterErrorBg,
        color: theme.customPalette.textColors['SecondaryRed/50'],
        borderWidth: '1px',
        borderStyle: 'solid',
        borderColor: `${theme.customPalette.borderColors.toasterErrorBorder}`,
        boxShadow: 'none',
      },
      icon: (
        <ErrorOutlineOutlinedIcon
          sx={{ color: theme.customPalette.textColors['SecondaryRed/50'] }}
        />
      ),
    },
  };
  const toastHandler = (newToast: ReactElement | string, toastType: CustomToastTypes) => {
    toast(newToast, {
      type: toastType,
      style: toastStyles[toastType].styles,
      icon: () => toastStyles[toastType].icon,
      closeButton: (
        <CloseOutlinedIcon
          sx={{ color: theme.customPalette.textColors['Neutral/50'], fontSize: '16px' }}
        />
      ),
    });
  };
  return {
    addToast: toastHandler,
  };
};

export default useCustomToast;

What is the expected behavior?
Previously this worked perfectly well, and now I see errors:

TypeError: Cannot add property Symbol(mui.processed_props), object is not extensible
    at attachTheme (chunk-NNS653BL.js?v=980847ca:7278:26)
    at chunk-NNS653BL.js?v=980847ca:7387:48
    at handleInterpolation2 (chunk-NNS653BL.js?v=980847ca:4262:22)
    at serializeStyles2 (chunk-NNS653BL.js?v=980847ca:4357:15)
    at chunk-NNS653BL.js?v=980847ca:4571:28
    at chunk-NNS653BL.js?v=980847ca:3089:16
    at renderWithHooks (chunk-W6L2VRDA.js?v=980847ca:11548:26)
    at updateForwardRef (chunk-W6L2VRDA.js?v=980847ca:14325:28)
    at beginWork (chunk-W6L2VRDA.js?v=980847ca:15946:22)
    at HTMLUnknownElement.callCallback2 (chunk-W6L2VRDA.js?v=980847ca:3674:22)
    

   The above error occurred in the <MuiSvgIconRoot> component:

   at http://localhost:3000/node_modules/.vite/deps/chunk-NNS653BL.js?v=980847ca:3088:50
   at SvgIcon2 (http://localhost:3000/node_modules/.vite/deps/chunk-NBYS3MR6.js?v=980847ca:180:21)
   at CloseOutlinedIcon

TypeError: Cannot add property Symbol(mui.processed_props), object is not extensible
    at attachTheme (chunk-NNS653BL.js?v=980847ca:7278:26)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 18 on Chromium

[futurethang]

Update, I don't exactly understand why but this small change helps, wrapping the troublesome icon in a fragment:

const toastHandler = (newToast: ReactElement | string, toastType: CustomToastTypes) => {
    toast(newToast, {
      type: toastType,
      style: toastStyles[toastType].styles,
      icon: () => toastStyles[toastType].icon,
      closeButton: (
        <>
          <CloseOutlinedIcon
            sx={{ color: theme.customPalette.textColors['Neutral/50'], fontSize: '16px' }}
          />
        </>
      ),
    });
  };

[slittlec]

I experienced same bug, I just downgraded will try again in the future.

[franktasa]

getting the same issue with v6 :(

[lukas-kd]

any known fixes here?
i have the same problem, but with a styled box (using as component span)...

[ololoken]

In my case the solution was to remove theme from StyledAvatar

const StyledAvatar = styled(MuiAvatar, .....)

.....

<StyledAvatar 
  variant={variant} 
  /*theme={theme} huh? */
  color={color} 
  type={type} 
  size={size} 
  {...others}>
  {children}
</StyledAvatar>

It looks like theme now is a standard property injected into styled components.

[rade-tomovic]

It happens in createStyled.js, in the attachTheme method. It's also interesting that it's happening locally, but when I published it, no issues on production version. UPDATE: I tested locally (vite 5.4.3, latest MUI), definitely not working in debug mode (yarn run vite), but when I build and serve (vite build + vite serve) it's working without any issues

[recurser]

@ololoken's comment fixed the issue for me. I was passing the theme into a MUI component as a property for some reason (theme={theme}). Removing this property resolved it.

[gaspernovak]

Hi @rade-tomovic, did you manage to find a solution?
@ololoken's solution worked for me in one case, but i still get the same error whenever i use forwardRef in the styled component

[rade-tomovic]

It works, but I need a theme to control the colors. Overriding theme colors with hard-coded ones isn’t a clean solution for my case. I hope this issue gets resolved soon.

[rade-tomovic]

I think the issue can be resolved (locally) if attachTheme function is updated inside node_modules/@mui/system/createStyled.js.

const PROCESSED_PROPS = Symbol('mui.processed_props');
const processedPropsCache = new WeakMap();

function attachTheme(props, themeId, defaultTheme) {
  try {
    if (processedPropsCache.has(props)) {
      return processedPropsCache.get(props);
    }
    const processedProps = {
      ...props,
      theme: resolveTheme(themeId, props.theme, defaultTheme),
      [PROCESSED_PROPS]: true // Mark as processed.
    };
    processedPropsCache.set(props, processedProps);
    return processedProps;
  } catch (error) {
    console.error('Error in attachTheme:', error);
    return props; // Return original props in case of error.
  }
}

I'm aware that it's not ideal, but it fixed similar issue for me where I forwarded theme as property to styled span

[noherczeg]

Can we have some insider info whether this is a bug, or are we misusing some APIs? If it's not considered as a bug, then the recommended patches above could be potentially harmful even.