hi
I am trying to integrate API with our application using React.js.
There is below error on using “new window.SDVApp.ParametricViewer(settings);”
The error looks like cloning objet problem with JSON in javascript
Is there anyone integrating API with React.js? how to solve this problem?
=== error ===
Uncaught TypeError: Converting circular structure to JSON
at JSON.stringify ()
at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (GlobalUtils.js:259)
at module$src$app$ViewerApp.default.module$src$shared$mixins$SettingsMixin.default (SettingsMixin.js:64)
at new module$src$app$ViewerApp.default (ViewerApp.js:80)
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:371)
=====javascript code in React component=====
const settings = {
container: window.document.getElementById(‘sdv-container’),
ticket: ‘my_ticket’,
};
this.api = new window.SDVApp.ParametricViewer(settings);
===== error occurs at =====
this.deepCopy = function(o, assign) {
if (o === undefined) return;
if (!assign) {
// simple case, copy everything, potentially loosing objects which can’t be stringified
return JSON.parse( JSON.stringify(o,that.deepCopyReplacer), that.deepCopyReviver );
}
=== error ===
package.js:283 Uncaught TypeError: Cannot read property ‘parentElement’ of undefined
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:283)
not working because according to your link about viewport api, viewport can be created by api instance. but api construction is failed because above code.
Hello @snabela I am also trying to integrate with react and getting this same error and am using version 2.6.0.
if there is no container everything goes smoothly and the request actually returns data from the api but when there is a container it throws this error I have been able to see where it is coming from through the console its when you try to stringfy a json in a globalUtils.js file. I can share more details as required because we really need to integrate this in our app in the shortest time.
Hi @ovuobasampson, the latest version of our viewer out there is 2.14.0, you can always find the latest version by visiting www.shapediver.com/api, which will take you to the release notes and documentation of the latest released viewer.
Let me know whether the problem still happens.
Hello @snabela thanks for pointing me that direction, I have made the necessary changes to adapt that but am currently having a cors error as am trying to use the plugin, I used the defer attribute that was recommended in the docs but was still getting the error I also used the crossorigin attribute which was what I used for the formal version of the plugin to avoid the error and I was still getting it. I am very open to any suggestions you might have. The domain making the request actually has ssl installed too.
sorry I later cleared the cors error. But it came back to this.
backend.js:1 TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘HTMLDivElement’
| property ‘__reactInternalInstance$7bfqfp2e6mm’ -> object with constructor ‘Hr’
— property ‘stateNode’ closes the circle
at JSON.stringify ()
at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (GlobalUtils.js:260)
at module$src$app$ViewerApp.default.module$src$shared$mixins$SettingsMixin.default (SettingsMixin.js:64)
at new module$src$app$ViewerApp.default (ViewerApp.js:80)
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:396)
at t.value (Model.js:28)
at qo (react-dom.production.min.js:4978)
at Ho (react-dom.production.min.js:5123)
at react-dom.production.min.js:5975
at Object.t.unstable_runWithPriority (scheduler.production.min.js:274)
GlobalUtils.js:260 Uncaught (in promise) TypeError: Converting circular structure to JSON
–> starting at object with constructor ‘HTMLDivElement’
| property ‘__reactInternalInstance$7bfqfp2e6mm’ -> object with constructor ‘Hr’
— property ‘stateNode’ closes the circle
at JSON.stringify ()
at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (GlobalUtils.js:260)
at module$src$app$ViewerApp.default.module$src$shared$mixins$SettingsMixin.default (SettingsMixin.js:64)
at new module$src$app$ViewerApp.default (ViewerApp.js:80)
at new ParametricViewer$$module$build$package.ParametricViewer (package.js:396)
at t.value (Model.js:28)
at qo (react-dom.production.min.js:4978)
at Ho (react-dom.production.min.js:5123)
at react-dom.production.min.js:5975
at Object.t.unstable_runWithPriority (scheduler.production.min.js:274)
Here is the code for the model.js
let _container = this.refs.containersdv;
const settings = {
container: _container,
ticket: ‘TICKET_TOKEN’,
modelViewUrl : ‘eu-central-1’
};
this.api = new window.SDVApp.ParametricViewer(settings);
It seems that whatever you are passing as property container causes the problem. What kind of object are you passing?
Expected is an Element object, e.g. as returned from document.getElementById.
This is what our viewer uses in case you don’t pass a container:
Ok, Thanks for your response. what am passing is a div in the page that has a a ref of ‘containersdv’ which is what am referencing in this line
let _container = this.refs.containersdv;
But then to experiment I removed the entire container and since it defaults to an element with an id of ‘sdv-container-viewport’ I created a div with that id. But the error was still the same. The only way am not getting the error is if I use an empty container this way
Many thanks. It seems React adds some properties to the div which cause the problem. We made some changes in the staging version of our viewer. Please give it a try using the following files:
Ah really glad you have been able to identify the problem. Thanks for this. I just switched to the staging version at the moment and gave it another try but it seems to still need a few changes as amstill getting the error in the console. I cleared the cache and confirmed it was linked to the staging file to make sure but it was the same error it returned.
We will create a minimal example which shows how to embed the viewer into a React App. Please be patient, we might be able to get it done this week, but this is not guaranteed.
Please check out this example to see how it works: https://codepen.io/ShapeDiver/pen/oNvoBxb?editors=1010
For now this works only using the development version of our viewer, will let you know as soon as this becomes part of a release.