'Maximum call stack size exceeded' error when trying to add a small number of nodes

Question

'Maximum call stack size exceeded' error when trying to add a small number of nodes

developergunny opened this issue a year ago · comments

I am creating a tree by transforming dynamic json data into node form. In fact, it works well when transformed and rendered with about 200 nodes, but an error occurs in the tree library after binding 38 node data.

Node data can be provided if desired.

OS: mac
Browser: chrome
Version: 114.0.5735.133

(38) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 'legos', rootId: 'composite', originalId: 'legos', parent: 'root', droppable: true, …}
1: {id: 'list-0', rootId: 'composite', originalId: 'list', parent: 'legos', droppable: true, …}
2: {id: 'id-unknown-0', rootId: 'composite', originalId: '', parent: 'list-0', droppable: false, …}
3: {id: 'switch-1', rootId: 'composite', originalId: 'switch', parent: 'list-0', droppable: true, …}
4: {id: 'c44b91f0-13fb-11ee-8191-e921c457342a', rootId: 'composite', originalId: 'case', parent: 'switch-1', droppable: false, …}
5: {id: 'c44b91f1-13fb-11ee-8191-e921c457342a', rootId: 'composite', originalId: 'case', parent: 'switch-1', droppable: false, …}
6: {id: 'line-2', rootId: 'composite', originalId: 'line', parent: 'list-0', droppable: false, …}
7: {id: 'grid-3', rootId: 'composite', originalId: 'grid', parent: 'list-0', droppable: true, …}
8: {id: 'list-0', rootId: 'composite', originalId: 'list', parent: 'grid-3', droppable: true, …}
9: {id: 'id-unknown-0', rootId: 'composite', originalId: '', parent: 'list-0', droppable: false, …}
10: {id: 'id-unknown-1', rootId: 'composite', originalId: '', parent: 'list-0', droppable: false, …}
11: {id: 'grid-1', rootId: 'composite', originalId: 'grid', parent: 'grid-3', droppable: true, …}
12: {id: 'list-0', rootId: 'composite', originalId: 'list', parent: 'grid-1', droppable: true, …}
13: {id: 'id-unknown-0', rootId: 'composite', originalId: '', parent: 'list-0', droppable: false, …}
14: {id: 'id-unknown-1', rootId: 'composite', originalId: '', parent: 'list-0', droppable: false, …}
15: {id: 'switch-1', rootId: 'composite', originalId: 'switch', parent: 'grid-1', droppable: true, …}
16: {id: 'c44b91f2-13fb-11ee-8191-e921c457342a', rootId: 'composite', originalId: 'case', parent: 'switch-1', droppable: false, …}
17: {id: 'c44b91f3-13fb-11ee-8191-e921c457342a', rootId: 'composite', originalId: 'case', parent: 'switch-1', droppable: false, …}
18: {id: 'variableText-1', rootId: 'composite', originalId: 'variableText', parent: 'legos', droppable: false, …}
19: {id: 'listByMeta-2', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
20: {id: 'variableText-3', rootId: 'composite', originalId: 'variableText', parent: 'legos', droppable: false, …}
21: {id: 'listByMeta-4', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
22: {id: 'listByMeta-5', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
23: {id: 'grid-6', rootId: 'composite', originalId: 'grid', parent: 'legos', droppable: true, …}
24: {id: 'varText-0', rootId: 'composite', originalId: 'varText', parent: 'grid-6', droppable: false, …}
25: {id: 'varText-1', rootId: 'composite', originalId: 'varText', parent: 'grid-6', droppable: false, …}
26: {id: 'listByMeta-7', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
27: {id: 'listByMeta-8', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
28: {id: 'button-9', rootId: 'composite', originalId: 'button', parent: 'legos', droppable: false, …}
29: {id: 'varText-10', rootId: 'composite', originalId: 'varText', parent: 'legos', droppable: false, …}
30: {id: 'listByMeta-11', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
31: {id: 'grid-12', rootId: 'composite', originalId: 'grid', parent: 'legos', droppable: true, …}
32: {id: 'varText-0', rootId: 'composite', originalId: 'varText', parent: 'grid-12', droppable: false, …}
33: {id: 'varText-1', rootId: 'composite', originalId: 'varText', parent: 'grid-12', droppable: false, …}
34: {id: 'listByMeta-13', rootId: 'composite', originalId: 'listByMeta', parent: 'legos', droppable: false, …}
35: {id: 'toolbar', rootId: 'composite', originalId: 'toolbar', parent: 'root', droppable: true, …}
36: {id: 'headerLego', rootId: 'composite', originalId: 'headerLego', parent: 'toolbar', droppable: true, …}
37: {id: 'title-0', rootId: 'composite', originalId: 'title', parent: 'headerLego', droppable: false, …}
length: 38

Uncaught RangeError RangeError: Maximum call stack size exceeded
    at <anonymous> (/Users/mac/Documents/workspace/?/node_modules/@minoru/react-dnd-treeview/dist/index.js:367:1)
    at search (/Users/mac/Documents/workspace/?/node_modules/@minoru/react-dnd-treeview/dist/index.js:367:1)
    at search (/Users/mac/Documents/workspace/?/node_modules/@minoru/react-dnd-treeview/dist/index.js:372:1)
    at search (/Users/mac/Documents/workspace/?/node_modules/@minoru/react-dnd-treeview/dist/index.js:372:1)
    eview/dist/index.js:372:1)
    at search (/Users/mac/Documents/workspace/?/node_modules/@minoru/react-dnd-treeview/dist/index.js:372:1)
    ....

minop1205 · Answer 1 · Mon Jun 26 2023 17:28:54 GMT+0800 (China Standard Time)

@developergunny
Thank you for your report.
It would be helpful if you could provide me with the node data so I can check it.

developergunny · Answer 2 · Mon Jun 26 2023 17:53:19 GMT+0800 (China Standard Time)

@minop1205

Here it is. JSON is long,I will send it as a text file.

tree_jsondata.txt

DndTree.js

<Box className={treeviewStyles.wrapper} sx={{ p: `0px 0px 20px ${isComposite ? 0 : 10}px` }}>
  <Tree
      ref={ref}
      tree={treeDatas}
      rootId="root"
      classes={{
          root: treeviewStyles.treeRoot,
          placeholder: treeviewStyles.placeholder,
          dropTarget: treeviewStyles.dropTarget,
          listItem: treeviewStyles.listItem,
      }}
      extraAcceptTypes={[NativeTypes.TEXT]}
      placeholderRender={(node, { depth }) => <Placeholder node={node} depth={depth} />}
      render={(node, { depth, isOpen, isDropTarget }) => {
          return (
              <Node
                  getPipeHeight={getPipeHeight}
                  node={node}
                  depth={depth}
                  isOpen={isOpen}
                  onClick={() => {
                      if (node.droppable) {
                          toggle(node?.id);
                      }
                  }}
                  isDropTarget={isDropTarget}
                  treeData={treeDatas}
              />
          );
      }}
      dragPreviewRender={(monitorProps) => {
          return <DragPreview monitorProps={monitorProps} />;
      }}
      canDrop={handleCanDrop}
      onDrop={handleDrop}
      enableAnimateExpand
      sort={false}
      insertDroppableFirst={false}
      dropTargetOffset={5}
  />
</Box>

Node.js

<Box
    className={`${treeviewStyles.nodeWrapper} tree-node ${
        node.droppable && isDropTarget ? treeviewStyles.dropTarget : ''
    }`}
    sx={{
        marginInlineStart: `${indent}px`,
        paddingInlineStart: () => {
            return !node.droppable ? '26px !important' : '0px';
        },
    }}
    onClick={() => handleSelectedNode(node)}
>
    {node.droppable && (
        <Box
            className={`${treeviewStyles.expandIconWrapper} ${
                isOpen ? treeviewStyles.open : treeviewStyles.close
            }`}
            onClick={handleToggle}
        >
            <CardMedia component="img" image={RightArrowIcon} sx={{ width: 24, height: 24 }} />
        </Box>
    )}
    <NodeIcon node={node} />
    {/* node.droppable ? (isOpen ? 'folder-open' : 'folder') : null */}
    <Box
        className={treeviewStyles.pipeX}
        sx={{
            width: () => {
                if (depth > 0) {
                    if (node.droppable) {
                        return `${TREE_X_OFFSET - 9}px`;
                    } else {
                        return `${TREE_X_OFFSET + 3}px`;
                    }
                } else {
                    return `0px`;
                }
            },
        }}
    />
    {getDescendants(treeData, node.parent)[0].id === node.id && (
        <Box
            className={treeviewStyles.pipeY}
            style={{
                height: Math.max(0, getPipeHeight(node.parent, treeData) - 16),
            }}
        />
    )}
    <Box className={treeviewStyles.labelGridItem}>{node.text}</Box>
</Box>

developergunny · Answer 3 · Mon Jun 26 2023 19:40:23 GMT+0800 (China Standard Time)

Sorry for the inconvenience.

This is a problem caused by duplicate node ids.

I solved this.

Close the issue.

minop1205 · Answer 4 · Mon Jun 26 2023 19:56:07 GMT+0800 (China Standard Time)

Yes, I have. I just checked too.
I found a circular reference with the following IDs

list-0
grid-3

I'm glad you solved it.