xyflow: ResizeObserver loop limit exceeded

Describe the Bug

import React, { useState } from ‘react’; import { Handle } from ‘reactflow’; import { Select } from ‘antd’; import ‘./index.css’; import { shallow } from ‘zustand/shallow’; import useStore from ‘…/…/store’;

const selector = (state) => ({ nodes: state.nodes, edges: state.edges, onNodesChange: state.onNodesChange, onEdgesChange: state.onEdgesChange, onConnect: state.onConnect, onAddNodes: state.onAddNodes });

export default function Formation (props) { const { id, isConnectable = true } = props; const { nodes, onAddNodes } = useStore(selector, shallow); const [Topoffset, setTopoffset] = useState([]); const handleChange = (value) => { let lengths = nodes.map(item => item.id == id); // nodes嵌套对象 const AddNode = { id: ${new Date().getTime()}, data: { label: value }, type: ‘input’, position: { x: 15, y: lengths.length * 50 }, draggable: false, parentNode: id, extent: ‘parent’, targetPosition: ‘top’ } // 为reactflow添加嵌套子节点 onAddNodes([…nodes, AddNode]); // 更新该父节点下的所有子节点，从而根据length属性更新dom的marginTop间距 setTopoffset(lengths); }

return ( <div className='FormationNode'>

xxx

<div className=‘FormationNodeContent’ style={{ marginTop: Topoffset.length * 100 }}> <Select defaultValue=“lucy” style={{ width: 120 }} onChange={handleChange} options={[ { value: ‘jack’, label: ‘Jack’ }, { value: ‘lucy’, label: ‘Lucy’ }, { value: ‘Yiminghe’, label: ‘yiminghe’ }, { value: ‘disabled’, label: ‘Disabled’, disabled: true } ]} className=“nodrag” /> <button onClick={() => { handleChange(‘sss’) }}>asd</button>

  </div>
  <Handle type="target" position="top" isConnectable={isConnectable} />
  <Handle type="source" position="bottom" isConnectable={isConnectable} />
</div>

) }

这个文件是一个自定义节点，我希望在选择选项时添加新的嵌套节点，通过zustand新增node，这成功了，然后通过nodes的长度改变div的外边距头部，但是就在这里动态改变margintop时报错了。我已经被折磨一天了。

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

在一个自定义节点中添加另一个子节点时，改变其父节点的高度/间距时报错

Expected behavior

因为子节点是脱离文档流的，所以我希望能够通过改变css间距来改变父节点高度

Screenshots or Videos

No response

Platform

OS: [e.g. macOS, Windows, Linux]
Browser: [e.g. Chrome, Safari, Firefox]
Version: [e.g. 91.1]

Additional context

No response

About this issue

Original URL
State: closed
Created a year ago
Reactions: 3
Comments: 23 (8 by maintainers)

Most upvoted comments

This is what worked for me:

// Remove the resizeObserver error
useEffect(() => {
  const errorHandler = (e: any) => {
    if (
      e.message.includes(
        "ResizeObserver loop completed with undelivered notifications" ||
          "ResizeObserver loop limit exceeded"
      )
    ) {
      const resizeObserverErr = document.getElementById(
        "webpack-dev-server-client-overlay"
      );
      if (resizeObserverErr) {
        resizeObserverErr.style.display = "none";
      }
    }
  };
  window.addEventListener("error", errorHandler);

  return () => {
    window.removeEventListener("error", errorHandler);
  };
}, []);

Hope it helps

Thanks

this finally worked for me

appreciate the help

bojalive on Oct 15, 2023

This is what worked for me:

// Remove the resizeObserver error
useEffect(() => {
  const errorHandler = (e: any) => {
    if (
      e.message.includes(
        "ResizeObserver loop completed with undelivered notifications" ||
          "ResizeObserver loop limit exceeded"
      )
    ) {
      const resizeObserverErr = document.getElementById(
        "webpack-dev-server-client-overlay"
      );
      if (resizeObserverErr) {
        resizeObserverErr.style.display = "none";
      }
    }
  };
  window.addEventListener("error", errorHandler);

  return () => {
    window.removeEventListener("error", errorHandler);
  };
}, []);

Hope it helps

dPacc on Aug 31, 2023

Here is a temporary fix that I found, if you can add a slight delay to loading the ReactFlow component, the error seems to disappear.

const BuilderFlow = () => {
  const nodes = [
    {
      id: NodeTypes.Text,
      label: "Text Message",
      type: NodeTypes.Text,
    },
    {
      id: NodeTypes.Image,
      label: "Image Message",
      type: NodeTypes.Image,
    },
  ];

  return (
    <>
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column",
        }}
      >
        <Header />
        <DndProvider backend={HTML5Backend}>
          <ReactFlowProvider>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "3fr 1fr",
                gridAutoRows: "1fr",
                flex: 1,
              }}
            >
              <FlowZone />
              <Sidebar nodes={nodes} />
            </div>
          </ReactFlowProvider>
        </DndProvider>
      </div>
    </>
  );
};

export default BuilderFlow;

I was getting the ResizeObserver loop limit error. I added 2 seconds delay to loading the ReactFlow component and the error disappeared.


const BuilderFlow = () => {
  const nodes = [
    {
      id: NodeTypes.Text,
      label: "Text Message",
      type: NodeTypes.Text,
    },
    {
      id: NodeTypes.Image,
      label: "Image Message",
      type: NodeTypes.Image,
    },
  ];

  return (
    <div
      style={{
        height: "100%",
        width: "100%",
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Header />
      <DndProvider backend={HTML5Backend}>
        <ReactFlowProvider>
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "3fr 1fr",
              gridAutoRows: "1fr",
              flex: 1,
            }}
          >
            <FlowZone />
            <Sidebar nodes={nodes} />
          </div>
        </ReactFlowProvider>
      </DndProvider>
    </div>
  );
};

const DelayedBuilderFlow = () => {
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 2000);
  }, []);

  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      {isLoading ? (
        <div className="builder-dual-ring"></div>
      ) : (
        <BuilderFlow />
      )}
    </div>
  );
};

export default DelayedBuilderFlow;

Hope this helps

dPacc on Jul 24, 2023