Error: Maximum update depth exceeded. (safari only)

[Mnigos]

Describe the bug

Sanity throws an error on blockContent type. This issue appears only on safari browser, works fine on chrome.

Unhandled Runtime Error
Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Call Stack:
throwIfInfiniteUpdateLoopDetected@
getRootForUpdatedFiber@
dispatchSetState@
@
commitHookEffectListMount@
commitHookPassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
commitPassiveMountOnFiber@
recursivelyTraversePassiveMountEffects@
Component Stack:

ForwardRef(Tooltip)
div
styled.div
ForwardRef(Box)
div
styled.div
ForwardRef(Box)
Styled(ForwardRef(Box))
ForwardRef(Flex)
div
styled.div
ForwardRef(Box)
Styled(ForwardRef(Box))
div
styled.div
ForwardRef(Box)
TextBlock
div
DraggableBlock
div
Element
Element
Children

blockContentType.ts

export const blockContentType = defineType({
  title: "Block Content",
  name: "blockContent",
  type: "array",
  of: [
    defineArrayMember({
      type: "block",
      // Styles let you define what blocks can be marked up as. The default
      // set corresponds with HTML tags, but you can set any title or value
      // you want, and decide how you want to deal with it where you want to
      // use your content.
      styles: [
        { title: "Normal", value: "normal" },
        { title: "H1", value: "h1" },
        { title: "H2", value: "h2" },
        { title: "H3", value: "h3" },
        { title: "H4", value: "h4" },
        { title: "H5", value: "h5" },
        { title: "Quote", value: "blockquote" },
      ],
      lists: [
        { title: "Bullet", value: "bullet" },
        { title: "Number", value: "number" },
      ],
      // Marks let you mark up inline text in the Portable Text Editor
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting
        decorators: [
          { title: "Strong", value: "strong" },
          { title: "Emphasis", value: "em" },
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
            title: "URL",
            name: "link",
            type: "object",
            fields: [
              {
                title: "URL",
                name: "href",
                type: "url",
              },
            ],
          },
        ],
      },
    }),
    defineArrayMember({
      type: "image",
      icon: ImageIcon,
      options: { hotspot: true },
      fields: [
        {
          name: "alt",
          type: "string",
          title: "Alternative Text",
        },
      ],
    }),
    defineArrayMember({
      type: "youtube",
    }),
    defineArrayMember({
      type: "twitter",
    }),
    defineArrayMember({
      icon: BlockquoteIcon,
      type: "quote",
    }),
    defineArrayMember({
      icon: ThLargeIcon,
      type: "table",
    }),
  ],
})

Screenshots

Which versions of Sanity are you using?

Cannot run sanity versions because of ERR_REQUIRE_ESM

{
    "next-sanity": "^9.8.30",
    "@sanity/icons": "^3.5.6",
    "@sanity/image-url": "1.1.0",
    "@sanity/table": "^1.1.3",
    "@sanity/vision": "^3.68.3",
    "sanity": "^3.68.3",
}

What operating system are you using?
MacOS

Which versions of Node.js / npm are you running?

npm -> 10.8.2
node -> v20.17.0

[victorberland]

Facing this issue as well, also after removing package-lock and reinstalling the packages.