TreeView Call Stack Error

I have a question around building out a treeview. I have a customer that would like a dynamic view of all of their departments (almost 1000) in the correct hierarchy. The list is generated from PeopleSoft tables. The hierarchy goes from Division, to Top-Level, Second and finally third level departments, with a specific naming scheme. I have the code working outside of PSU, but keep running into the error below when creating the dashboard.


I have been looking in the docs, but haven’t come across anything that details a hard limit for a treeview. Does anyone know what this limit is, and if there is a way around it?

Product: PowerShell Universal
Version: 1.5.16

Can you open the web browser dev tools (F12) and then post the error thats shown in the console with the call stack?

Here is the error. I can expand the Division level of the tree (XXXX), and the top-level (XXX). It is when I try to drill down to the next level the error is generated

[2021-05-14T21:20:00.757Z] Information: WebSocket connected to ws://server01:5000/dashboardhub?dashboardId=7&id=6iWShitL64iLDK5weQPn5Q.
Utils.js:204 [2021-05-14T21:20:00.760Z] Information: Using HubProtocol ‘json’.
react-dom.production.min.js:209 RangeError: Maximum call stack size exceeded
at e (TreeView.js:584)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
at e (TreeView.js:593)
es @ react-dom.production.min.js:209
n.payload @ react-dom.production.min.js:227
uo @ react-dom.production.min.js:129
Da @ react-dom.production.min.js:179
gs @ react-dom.production.min.js:263
cl @ react-dom.production.min.js:246
sl @ react-dom.production.min.js:246
Qs @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
t.unstable_runWithPriority @ scheduler.production.min.js:19
Wi @ react-dom.production.min.js:122
Gi @ react-dom.production.min.js:123
Vi @ react-dom.production.min.js:122
N @ react-dom.production.min.js:287
Kt @ react-dom.production.min.js:68
react-dom.production.min.js:209 Error: Minified React error #31; visit[]=RangeError%3A%20Maximum%20call%20stack%20size%20exceeded&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at ko (react-dom.production.min.js:139)
at react-dom.production.min.js:149
at Ra (react-dom.production.min.js:173)
at gs (react-dom.production.min.js:265)
at cl (react-dom.production.min.js:246)
at sl (react-dom.production.min.js:246)
at Qs (react-dom.production.min.js:239)
at react-dom.production.min.js:123
at t.unstable_runWithPriority (scheduler.production.min.js:19)
at Wi (react-dom.production.min.js:122)

This looks like a bug either in the Material-UI library or our JavaScript wrapper for it. I’ll file an issue to try and look into this.

It may be possible to load the tree dynamically rather than all at once to work around it but I’m not sure.