[tree view] Circular Structure in JSON

ajmeese7 commented 4 months ago

Steps to reproduce

// External imports
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import Typography from "@mui/material/Typography";
import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { TreeItem } from "@mui/x-tree-view/TreeItem";

// Ensure the tree items are defined within the context of RichTreeView
export const GeoLocationDistributionTree = () => {
  const treeItems = [
    {
      id: "1",
      label: "Item 1",
      children: [
        { id: "1-1", label: "Item 1-1" },
        { id: "1-2", label: "Item 1-2" }
      ]
    },
    {
      id: "2",
      label: "Item 2",
      children: [{ id: "2-1", label: "Item 2-1" }]
    },
    { id: "3", label: "Item 3" }
  ];

  const renderTreeItems = (items: any[]) => {
    return items.map((item) => (
      <TreeItem
        key={item.id}
        itemId={item.id}
        label={<Typography style={{ fontSize: "15px" }}>{item.label}</Typography>}
      >
        {item.children ? renderTreeItems(item.children) : null}
      </TreeItem>
    ));
  };

  return (
    <div style={{ marginTop: "10px" }}>
      <RichTreeView
        slots={{
          collapseIcon: ExpandMoreIcon,
          expandIcon: ChevronRightIcon
        }}
        items={renderTreeItems(treeItems)}
      />
    </div>
  );
};

Can be seen live here: https://playcode.io/1916318

Current behavior

Uncaught TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'HTMLDivElement'
    |     property '__reactFiber$svvvz7m7qh' -> object with constructor 'FiberNode'
    --- property 'stateNode' closes the circle
    at JSON.stringify (<anonymous>)
    at processItem (useTreeViewItems.js:21:1)
    at useTreeViewItems.js:48:1
    at Array.forEach (<anonymous>)
    at updateItemsState (useTreeViewItems.js:48:1)
    at useTreeViewItems.getInitialState (useTreeViewItems.js:168:1)
    at useTreeView.js:44:1
    at Array.forEach (<anonymous>)
    at useTreeView.js:42:1
    at mountState (react-dom.development.js:16986:1)

The above error occurred in the <ForwardRef(RichTreeView)> component:

    at RichTreeView (http://localhost:3000/static/js/bundle.js:107548:17)
    at div
    at GeoLocationDistributionTree
    at div
    at div
    at div
    at div
    at Transition (http://localhost:3000/static/js/bundle.js:356468:30)
    at http://localhost:3000/static/js/bundle.js:304868:3
    at http://localhost:3000/static/js/bundle.js:302132:3
    at http://localhost:3000/static/js/bundle.js:301050:7
    at http://localhost:3000/static/js/bundle.js:300894:7
    at div
    at http://localhost:3000/static/js/bundle.js:301180:7
    at div
    at http://localhost:3000/static/js/bundle.js:300835:70
    at div
    at O (http://localhost:3000/static/js/bundle.js:398006:6)
    at ProjectInfo (http://localhost:3000/static/js/bundle.js:53802:3)
    at div
    at O (http://localhost:3000/static/js/bundle.js:398006:6)
    at Sidebar (http://localhost:3000/static/js/bundle.js:66533:3)
    at div
    at O (http://localhost:3000/static/js/bundle.js:398006:6)
    at Provider (http://localhost:3000/static/js/bundle.js:347248:20)
    at div
    at O (http://localhost:3000/static/js/bundle.js:398006:6)
    at NeoCanvas (http://localhost:3000/static/js/bundle.js:43534:3)
    at RouterTab (http://localhost:3000/static/js/bundle.js:21118:3)
    at Route (http://localhost:3000/static/js/bundle.js:350309:29)
    at Switch (http://localhost:3000/static/js/bundle.js:350478:29)
    at div
    at div
    at O (http://localhost:3000/static/js/bundle.js:398006:6)
    at RouterTabs (http://localhost:3000/static/js/bundle.js:21187:3)
    at div
    at div
    at O (http://localhost:3000/static/js/bundle.js:398006:6)
    at ClawCanvasContainer (http://localhost:3000/static/js/bundle.js:44335:76)
    at Route (http://localhost:3000/static/js/bundle.js:350309:29)
    at Switch (http://localhost:3000/static/js/bundle.js:350478:29)
    at div
    at LockScreen (http://localhost:3000/static/js/bundle.js:2555:78)
    at Router (http://localhost:3000/static/js/bundle.js:349981:30)
    at ConnectedRouter (http://localhost:3000/static/js/bundle.js:175964:7)
    at ConnectedRouterWithContext (http://localhost:3000/static/js/bundle.js:176076:25)
    at ConnectFunction (http://localhost:3000/static/js/bundle.js:347507:68)
    at App (http://localhost:3000/static/js/bundle.js:1941:88)
    at tt (http://localhost:3000/static/js/bundle.js:397923:56)
    at Le (http://localhost:3000/static/js/bundle.js:397786:61)
    at Provider (http://localhost:3000/static/js/bundle.js:347248:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Expected behavior

It should work as expected. I removed all of the custom logic I had in my component and stripped it down to the barebones in case the error was caused by my objects, but it is still able to be reproduced by this simple static section of code.

Context

I might be an idiot who's doing something completely wrong, if so I apologize in advance and humbly request that you correct the error of my ways.

Your environment

npx @mui/envinfo

``` System: OS: Linux 6.5 Zorin OS 17.1 17.1 Binaries: Node: 18.20.3 - ~/.nvm/versions/node/v18.20.3/bin/node npm: 10.8.1 - ~/.nvm/versions/node/v18.20.3/bin/npm pnpm: 9.1.1 - ~/.local/share/pnpm/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.20 @mui/icons-material: ^5.15.20 => 5.15.20 @mui/material: ^5.15.20 => 5.15.20 @mui/private-theming: 5.15.20 @mui/styled-engine: 5.15.14 @mui/styled-engine-sc: ^6.0.0-alpha.27 => 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 5.15.20 @mui/types: 7.2.14 @mui/utils: 5.15.20 @mui/x-tree-view: ^7.7.1 => 7.7.1 @types/react: ^18.2.0 => 18.2.78 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^6.1.8 => 6.1.8 typescript: ^4.9.5 => 4.9.5 ``` Using Brave Browser v1.67.119.

Search keywords: circular, structure, json

michelengelen commented 4 months ago

Hey @ajmeese7 Not sure how you got that circular structure error to show up (it is not showing for me). As for your code: You are using the RichTreeView component, so you don't need to render actual React Elements.

Try this instead:

const treeItems = [
  {
    id: '1',
    label: 'Item 1',
    children: [
      { id: '1-1', label: 'Item 1-1' },
      { id: '1-2', label: 'Item 1-2' },
    ],
  },
  {
    id: '2',
    label: 'Item 2',
    children: [{ id: '2-1', label: 'Item 2-1' }],
  },
  { id: '3', label: 'Item 3' },
];
// Ensure the tree items are defined within the context of RichTreeView
const GeoLocationDistributionTree = () => {
  return (
    <div style={{ marginTop: '10px' }}>
      <RichTreeView
        slots={{
          collapseIcon: ExpandMoreIcon,
          expandIcon: ChevronRightIcon,
        }}
        items={treeItems}
      />
    </div>
  );
};

ajmeese7 commented 4 months ago

Your suggestion works! Thank you, closing this out now.

github-actions[bot] commented 4 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ajmeese7: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

mui / mui-x