API integration with React.js

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.

Regards

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.

Thanks as I await your response.

Regards

Please post a screenshot of the CORS error from the browser console, or copy&paste it here.

Hello,

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:

document.getElementById('sdv-container-viewport')

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

const settings = {
container:  [ ],
ticket: ‘TICKET_TOKEN’,
modelViewUrl : ‘eu-central-1’
};

But I need a container for it to render, so I cant use that.

Thanks very much as I await your response

Many thanks for your reply. It’s not clear to me yet what’s going on. Could you post a minimal code example which allows to reproduce the problem?

Sure here it is I just created a component in react and added the code;

import React, { Component } from "react";

  class Model extends Component {


      componentDidMount() {
        // container for the viewer, typically this is a div
        let _container = this.refs.containersdv;
    // viewer settings
        const settings = {
          container:   _container,
          ticket: 'TICKET_TOKEN',
          modelViewUrl : 'eu-central-1'
        };
        this.api = new window.SDVApp.ParametricViewer(settings);
}
       

      render() {
       

        return (
          <div>
             <div ref="containersdv"></div>
          </div>
        );
      }
    }

    export default Model;

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:

In case this works it will become part of the upcoming release 2.15.0

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.

Thanks very much as I await your response

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.

Thank you very much for this really appreciate that. No problem, I will be waiting on you guys.

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.

Thank you for this. I just switched to the development version and everything cleared up and was just trying to set up the view using the example from the codepen and I just started getting a cors error. it seems some security was set on the development version.

here is the error incase

DOMException: Blocked a frame with origin "myUrl" from accessing a cross-origin frame.

Please post the full browser console log

sure here it is

backend.js:1 DOMException: Blocked a frame with origin "https://myURL" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at a.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1098:418)
    at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1107:467)
    at module$src$app$ViewerApp.default.getSettings (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1154:438)
    at module$src$app$ViewerApp.default.module$src$app$partials$ViewerAppParameterManager.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1834:170)
    at new module$src$app$ViewerApp.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2878:396)
    at new ParametricViewer$$module$build$package.ParametricViewer (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2896:382)
    at t.value (https://myURL/static/js/main.4eaf073f.chunk.js:1:40265)
    at qo (https://myURL/static/js/2.91193c0b.chunk.js:1:1165568)
    at Ho (https://myURL/static/js/2.91193c0b.chunk.js:1:1168244)
r @ backend.js:1
fo @ react-dom.production.min.js:4408
n.callback @ react-dom.production.min.js:4773
ro @ react-dom.production.min.js:4271
no @ react-dom.production.min.js:4257
qo @ react-dom.production.min.js:4999
Ho @ react-dom.production.min.js:5123
(anonymous) @ react-dom.production.min.js:5975
t.unstable_runWithPriority @ scheduler.production.min.js:274
Ps @ react-dom.production.min.js:5974
As @ react-dom.production.min.js:5958
js @ react-dom.production.min.js:5925
_s @ react-dom.production.min.js:5860
Zo @ react-dom.production.min.js:5787
Ms @ react-dom.production.min.js:6077
Fs @ react-dom.production.min.js:6085
Us.render @ react-dom.production.min.js:6276
(anonymous) @ react-dom.production.min.js:6360
Ns @ react-dom.production.min.js:6007
Vs @ react-dom.production.min.js:6359
render @ react-dom.production.min.js:6390
(anonymous) @ index.js:14
Promise.then (async)
1085 @ index.js:13
f @ model:1
496 @ serviceWorker.js:132
f @ model:1
a @ model:1
e @ model:1
(anonymous) @ main.4eaf073f.chunk.js:1
CopyManager.js:33 Uncaught (in promise) DOMException: Blocked a frame with origin "https://myURL" from accessing a cross-origin frame.
    at JSON.stringify (<anonymous>)
    at a.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1098:418)
    at GlobalUtils$$module$src$shared$util$GlobalUtils.deepCopy (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1107:467)
    at module$src$app$ViewerApp.default.getSettings (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1154:438)
    at module$src$app$ViewerApp.default.module$src$app$partials$ViewerAppParameterManager.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:1834:170)
    at new module$src$app$ViewerApp.default (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2878:396)
    at new ParametricViewer$$module$build$package.ParametricViewer (https://shapediverviewer.s3.amazonaws.com/v2/branch/development/sdv.concat.min.js:2896:382)
    at t.value (https://myURL/static/js/main.4eaf073f.chunk.js:1:40265)
    at qo (https://myURL/static/js/2.91193c0b.chunk.js:1:1165568)
    at Ho (https://myURL/static/js/2.91193c0b.chunk.js:1:1168244)

We will need a full minimal code example to understand what’s going on here. I am pretty sure that this problem is not caused by our viewer. Some questions related to this:

  • What is myURL? A local alias for the loopback address 127.0.0.1?
  • The error message suggests that you are using an iframe. What for?
  • Can you make your example available on Codepen or Jsfiddle?

Thanks very much for all the help.

  • The myURL was just an identifier I was trying to use to show that the url of the site was there. Because I am actually testing on a live site and not allowed to show the url publicly for now.

Once you confirmed that it was not a block from your end I began full debugging of the entire codebase and I finally got the issue. It was due to the stripe library that is also been used in this application there seems to be a sort of clash between the two libraries am guessing this is because they are both adding some frames or embedding something in the app.

So once I removed that I was able to get the model to show up. I am still looking for a workaround for the stripe library because I need the both libraries in the app but glad I was able to pin point where my own issue was coming from.

Thanks once again for the codepen and the update to the library really helped to get this solved.

FYI we release version 2.16.0 of the ShapeDiver Viewer, which includes support for React, the codepen has been updated to use this released version instead of development: https://codepen.io/ShapeDiver/pen/oNvoBxb