I have this fairly simple code using TableTree which is pretty much copied from Atlaskit by Atlassian
import React from 'react';
import ForgeReconciler, { Text } from '@forge/react';
import TableTree from '@atlaskit/table-tree';
import staticData from './data.json';
const App = () => {
const Title = (props) => <span>{props.title}</span>;
const Numbering = (props) => <span>{props.numbering}</span>;
return (
<>
<Text>Hi world</Text>
<TableTree
headers={['Title', 'Numbering']}
columns={[Title, Numbering]}
columnWidths={['200px', '200px']}
items={staticData.children}
/>
</>
)
};
ForgeReconciler.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Howerver, there is the following error in the console log:
global-bridge.js:2 Uncaught (in promise) Error: Send request message failed for reconcile in http://localhost:8000
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'r'
| property '_reactInternals' -> object with constructor 'il'
--- property 'stateNode' closes the circle
at JSON.stringify (<anonymous>)
at o (global-bridge.js:2:81675)
at xe (global-bridge.js:2:81833)
at global-bridge.js:2:83616
at r.dispatch (global-bridge.js:2:63201)
at r.resolve (global-bridge.js:2:62258)
at j (global-bridge.js:2:61515)
at A (global-bridge.js:2:61562)
at r.dispatch (global-bridge.js:2:63609)
at r.then (global-bridge.js:2:63949)
at global-bridge.js:2:92437
at r.dispatch (global-bridge.js:2:63310)
at r.reject (global-bridge.js:2:62795)
at r.dispatch (global-bridge.js:2:63276)
at r.reject (global-bridge.js:2:62795)
at r.dispatch (global-bridge.js:2:63276)
at r.reject (global-bridge.js:2:62795)
at r.dispatch (global-bridge.js:2:63237)
at r.resolve (global-bridge.js:2:62258)
at j (global-bridge.js:2:61515)
(anonymous) @ global-bridge.js:2
r.dispatch @ global-bridge.js:2
r.reject @ global-bridge.js:2
r.dispatch @ global-bridge.js:2
r.reject @ global-bridge.js:2
r.dispatch @ global-bridge.js:2
r.reject @ global-bridge.js:2
r.dispatch @ global-bridge.js:2
r.resolve @ global-bridge.js:2
j @ global-bridge.js:2
A @ global-bridge.js:2
r.dispatch @ global-bridge.js:2
r.then @ global-bridge.js:2
e @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
n @ global-bridge.js:2
request @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
c @ global-bridge.js:2
Promise.then
s @ global-bridge.js:2
(anonymous) @ global-bridge.js:2
n @ global-bridge.js:2
e.callBridge @ global-bridge.js:2
t.callBridge @ reconciler.js:39
resetAfterCommit @ reconciler.js:109
(anonymous) @ react-reconciler.production.min.js:192
Ji @ react-reconciler.production.min.js:190
zi @ react-reconciler.production.min.js:182
Xt @ react-reconciler.production.min.js:41
ji @ react-reconciler.production.min.js:175
t.updateContainer @ react-reconciler.production.min.js:231
render @ reconciler.js:217
6788 @ index.jsx:23
i @ bootstrap:22
(anonymous) @ startup:6
(anonymous) @ startup:6
Show 9 more frames
Show less
The app hangs forever:
This error occurs only when TableTree is used.
What could be the cause? Thanks very much.