I'm getting this error from a function I created for dynamic and flexible styling on any type of property used in dynamic components and styling with Styled Components.

This is the useMediaQuery function:

export const useMediaQuery = (arr: Array<string | number>, name: string) => {
  if (!arr || !name) return;

  const query = new Array<string>();

  for (let i = 0; i < arr.length; i  ) {
    query.push(`@media (min-width: ${
      queryBreakpoints[i === 0 ? 0 : i - 1]
        ? typeof queryBreakpoints[i === 0 ? 0 : i - 1] === "number"
          ? `${queryBreakpoints[i === 0 ? 0 : i - 1]}px`
          : queryBreakpoints[i === 0 ? 0 : i - 1]
        : `${0}px`
    }) and (max-width: ${
      typeof queryBreakpoints[i] === "number"
        ? `${queryBreakpoints[i]}px`
        : queryBreakpoints[i]
    }) {
        ${name}: ${
      typeof arr[i] === "number" ? `${arr[i]}px` : arr[i] ? arr[i] : "auto"
    };
    }`);
  }

  query.push(`@media (min-width: ${
    queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]
      ? typeof queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1] ===
        "number"
        ? `${queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]}px`
        : queryBreakpoints[arr.length === 1 ? 0 : arr.length - 1]
      : `${0}px`
  }) {
        ${name}: ${
    typeof arr[arr.length === 1 ? 0 : arr.length - 1] === "number"
      ? `${arr[arr.length === 1 ? 0 : arr.length - 1]}px`
      : arr[arr.length === 1 ? 0 : arr.length - 1]
      ? arr[arr.length === 1 ? 0 : arr.length - 1]
      : "auto"
  }};`);

  return `& { ${query.join("")} }`;
};

This is the component in question Box:

 ${({ w }) => {
    if (typeof w === "object") {
      return useMediaQuery(w, "width");
    } else {
      return `width: ${typeof w === "number" ? `${w}px` : w ? w : "100%"};`;
    }
  }}
  ${({ maxWidth }) => {
    if (typeof maxWidth === "object") {
      return useMediaQuery(maxWidth, "max-width");
    } else {
      return `max-width: ${
        typeof maxWidth === "number"
          ? `${maxWidth}px`
          : maxWidth
          ? maxWidth
          : "unset"
      };`;
    }
  }}
  ${({ h }) => {
    if (typeof h === "object") {
      return useMediaQuery(h, "height");
    } else {
      return `height: ${typeof h === "number" ? `${h}px` : h ? h : "100%"};`;
    }
  }}
  ${({ maxHeight }) => {
    if (typeof maxHeight === "object") {
      return useMediaQuery(maxHeight, "max-height");
    } else {
      return `max-height: ${
        typeof maxHeight === "number"
          ? `${maxHeight}px`
          : maxHeight
          ? maxHeight
          : "unset"
      };`;
    }
  }}

It is too big to be placed here in one piece but the logic for all types of style attributes is the same, this function in question is called a total of 25 times among the components that use it, my question was why this error be happening since it doesn't create an infinite looping, even changing its structure to use a type of Object it keeps giving the same error, would someone know how to explain and guide me? I've done a lot of research but they all lead me to a completely different problem that only deals with infinite loops.

I tried to switch the function structure logic from Array to a Static Object but the error still persists, I still get the same message: Module parse failed: Maximum call stack size exceeded

CodePudding user response：

Apparently the error persisted due to the number of calls to the function, whether it was static or looping, I decided to deal with the properties in the Styled sheet and that way it was solved!

Result:

${({ w }) => {
    if (typeof w === "object") {
      const query = new Array<string>();
      const name = "width";

      for (let i = 0; i < w.length; i  ) {
        query.push(`@media (min-width: ${
          queryBreakpoints[i === 0 ? 0 : i - 1]
            ? typeof queryBreakpoints[i === 0 ? 0 : i - 1] === "number"
              ? `${queryBreakpoints[i === 0 ? 0 : i - 1]}px`
              : queryBreakpoints[i === 0 ? 0 : i - 1]
            : `${0}px`
        }) and (max-width: ${
          typeof queryBreakpoints[i] === "number"
            ? `${queryBreakpoints[i]}px`
            : queryBreakpoints[i]
        }) {
            ${name}: ${
          typeof w[i] === "number" ? `${w[i]}px` : w[i] ? w[i] : "auto"
        };
        }`);
      }

      query.push(`@media (min-width: ${
        queryBreakpoints[w.length === 1 ? 0 : w.length - 1]
          ? typeof queryBreakpoints[w.length === 1 ? 0 : w.length - 1] ===
            "number"
            ? `${queryBreakpoints[w.length === 1 ? 0 : w.length - 1]}px`
            : queryBreakpoints[w.length === 1 ? 0 : w.length - 1]
          : `${0}px`
      }) {
            ${name}: ${
        typeof w[w.length === 1 ? 0 : w.length - 1] === "number"
          ? `${w[w.length === 1 ? 0 : w.length - 1]}px`
          : w[w.length === 1 ? 0 : w.length - 1]
          ? w[w.length === 1 ? 0 : w.length - 1]
          : "auto"
      }};`);

      return `& { ${query.join("")} }`;
    } else {
      return `width: ${typeof w === "number" ? `${w}px` : w ? w : "100%"};`;
    }
  }}