Getting: (node-api.js:137) Uncaught TypeError: Cannot read properties of undefined (reading 'tree')

[mikr13]

Hi, thank you for your time and for all the great work on this project!

I’m currently using v3.4.3 with React 19 and Tanstack Start v1.114.27, and I’ve run into an issue.

I’m getting the following error when performing any action on a node (clicking, toggling, etc.) other than moving:

From debugging, it looks like this is initially undefined, then correctly holds the tree value on the second run—though by that point, the error has already occurred. I’m not sure why it runs twice.

Here’s a simplified version of my setup:

Data Type:

export type DataItem = {
  name: string;
  icon: string;
  id: string;
  isOpen?: boolean;
  children?: DataItem[];
};

// Define the type for the full data structure
export type Data = DataItem[];

Tree rendering logic:

<Tree
        data={data}
        // onCreate={onCreate}
        onMove={onMove}
        onToggle={onToggle}
        onRename={onEdit}
        idAccessor="id"
        childrenAccessor="children"
        onContextMenu={(e) => {
          console.log("context menu", e);
          e.preventDefault();
        }}
      >
        {Node}
</Tree>

Node logic:

export const Node = memo(
  ({ node, style, dragHandle }: NodeRendererProps<DataItem>) => {
    const isFolder = node.data ? Array.isArray(node.data?.children) : false;
    const isOpen = node.data.isOpen;
    const name = node.data.name;
    const iconName = node.data.icon as IconName;

    return (
      <div
        ref={dragHandle}
        style={style}
        className={cn(
          node.state,
          "flex flex-row gap-2 items-center cursor-grab",
        )}
      >
        <div className="flex flex-row gap-2 items-center cursor-grab">
          <Toggle
            toggle={node.toggle}
            isOpen={isOpen ?? false}
            isFolder={isFolder}
            isSelected={node.state.isSelected}
          />
          {name}
          <DynamicIcon
            name={iconName}
            strokeWidth={1.5}
            stroke={node.state.isSelected ? "white" : "cornflowerblue"}
            fillOpacity="0.5"
            fill={node.state.isSelected ? "white" : "cornflowerblue"}
            size={size}
          />
        </div>
      </div>
    );
  },
);

I’d really appreciate any insights into what might be causing this. Thanks in advance for your help or workarounds! 🙏