Uncaught TypeError: Cannot read properties of undefined (reading 'main')

[mahi1108]

Uncaught TypeError: Cannot read properties of undefined (reading 'main')
at SoftAvatarRoot.js:29:1
at processStyleArg (createStyled.js:55:1)
at createStyled.js:161:1
at handleInterpolation (emotion-serialize.development.esm.js:115:1)
at serializeStyles (emotion-serialize.development.esm.js:208:1)
at emotion-styled-base.browser.esm.js:100:1
at Styled(Component) (http://localhost:3000/static/js/bundle.js:32837:12)
at react-stack-bottom-frame (react-dom-client.development.js:11866:1)
at renderWithHooks (react-dom-client.development.js:3183:1)
at updateForwardRef (react-dom-client.development.js:4358:1)

I am trying to run this project but getting the above error, please let me know how to solve this Issue.

[Bhavit720]

same problem i am facing i cannot use it for the project do you have the package or anything where i can directly use it as the node modules and import for the project ?

[lagosnomad]

I am currently facing the same issue. @mahi1108 @Bhavit720 any luck in resolving this issue?

[nuralist]

Issue is with src/components/SoftAvatar/SoftAvatarRoot.js

It’s caused by this line:

linearGradient(gradients[bgColor].main, gradients[bgColor].state);

If gradients[bgColor] is undefined, it crashes trying to read .main.

Full Fixed Version of SoftAvatarRoot.js

// @mui material components
import Avatar from "@mui/material/Avatar";
import { styled } from "@mui/material/styles";

export default styled(Avatar)(({ theme = {}, ownerState = {} }) => {
  const { palette = {}, functions = {}, typography = {}, boxShadows = {} } = theme;
  const { gradients = {}, transparent = { main: "transparent" } } = palette;
  const { pxToRem = (v) => v, linearGradient = () => "" } = functions;
  const { size: fontSize = {}, fontWeightBold = 600 } = typography;
  const { shadow = "none", bgColor = "transparent", size = "md" } = ownerState;

  // ✅ Safely fallback to transparent or default gradient
  const gradient = gradients[bgColor];
  const backgroundValue =
    bgColor === "transparent"
      ? transparent.main
      : gradient
      ? linearGradient(gradient.main, gradient.state)
      : transparent.main;

  // ✅ Safe size handling
  let sizeValue;
  switch (size) {
    case "xs":
      sizeValue = {
        width: pxToRem(24),
        height: pxToRem(24),
        fontSize: fontSize.xs || "0.75rem",
      };
      break;
    case "sm":
      sizeValue = {
        width: pxToRem(36),
        height: pxToRem(36),
        fontSize: fontSize.sm || "0.875rem",
      };
      break;
    case "lg":
      sizeValue = {
        width: pxToRem(58),
        height: pxToRem(58),
        fontSize: fontSize.sm || "0.875rem",
      };
      break;
    case "xl":
      sizeValue = {
        width: pxToRem(74),
        height: pxToRem(74),
        fontSize: fontSize.md || "1rem",
      };
      break;
    case "xxl":
      sizeValue = {
        width: pxToRem(110),
        height: pxToRem(110),
        fontSize: fontSize.md || "1rem",
      };
      break;
    default:
      sizeValue = {
        width: pxToRem(48),
        height: pxToRem(48),
        fontSize: fontSize.md || "1rem",
      };
  }

  return {
    background: backgroundValue,
    fontWeight: fontWeightBold,
    boxShadow: boxShadows[shadow] || "none",
    ...sizeValue,
  };
});