renderDefault is not a function

[LiFaytheGoblin]

Hi all,

My company has a repo where Sanity is customized.

Therefore, in the portable text editor I have a dropdown menu for adding normal, h1, h2, goal content:

However, when I try to open the menu I immediately get the error that TypeError: props.renderDefault is not a function, referencing the line in the above code excerpt. This has certainly worked at some point (so the content people assure me), but I am not sure with which update it started not working anymore (I just recently joined the team). Did I miss something when upgrading? Even though the content people think it worked in 3.38, when I downgraded to that version of Sanity it did not work either, so I am not sure where the issue was introduced. I checked the change logs but could not find anything, and the documentation also fits to how I did it in my code. I would be happy about any pointers!

complexContent.ts (I pasted just the relevant parts):

import styled from "styled-components";

const GoalBox = styled.div`
  padding: 0.75rem 1.5rem 0.65rem;
  background-color: #e4d2f9;
  color: #5e17b6;
  border-radius: 1rem;
`;

export default {
  title: "Content",
  name: "complexContent",
  type: "array",
  of: [
    {
      title: "Block",
      type: "block",
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        {
          title: "Goal",
          value: "goal",
          component: (props: any) => {
            return <GoalBox>{props.renderDefault(props)}</GoalBox>;
          },
        },
      ],
    },
// clipped
  ],
  preview: {
    select: {
      title: "blockContent",
    },
    prepare(value: any) {
      const block = (value.blockContent || []).find(
        (bl: any) => bl._type === "block",
      );
      return {
        title: block
          ? block.children
              .filter((child: any) => child._type === "span")
              .map((span: any) => span.text)
              .join("")
          : "No title",
      };
    },
  },
};

package.json excerpt:

"dependencies": {
    "@sanity/components": "^2.14.0",
    "@sanity/vision": "^3.47.1",
    "get-video-id": "^3.6.5",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^4.12.0",
    "sanity": "^3.47.1",
    "styled-components": "^6.1.11"
  },
  "devDependencies": {
    "@sanity/client": "^6.20.1",
    "@sanity/eslint-config-studio": "^4.0.0",
    "@types/eslint": "^8.56.10",
    "@types/styled-components": "^5.1.34",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "prettier": "^3.1.1",
    "typescript": "^5.5.2"
  }

I also tried it with Sanity 3.48 and Sanity 3.49 and get the same issue.

[kariesta]

Hi, I came across this issue when looking for answers on something else. Just wondered if you fixed the problem. if not, i suggest typing props as BlockStyleProps.

[hrabiel]

Having the same issue with Sanity 3.52.2.

[LiFaytheGoblin]

I forgot to answer, but I ended up solving it in a bit of a hacky way:

complexContent.ts

{
          title: "Goal",
          value: "goal",
          component: (props: any) => {
            return <GoalBox>{(typeof props.renderDefault === "function" && props.renderDefault(props)) ?? props.children}</GoalBox>;
          },
        },