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
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 ref="containersdv"></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:
https://shapediverviewer.s3.amazonaws.com/v2/staging/sdv.concat.min.js, and
https://shapediverviewer.s3.amazonaws.com/v2/staging/sdv.css
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
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.
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.
@snabela, thanks for this snippet, it works well. However, I tried to implement it with a function component instead of a class component in React. There was a bug on my side and accidentally too many requests have been sent to the SD server and got an 429 response as too many requests. The response doesn’t include a Retry-after header and I wonder how much time should I wait until try again? Thank you and sorry for the overload 
Forgot to tell you, we have two types of rate limits:
Opening new sessions (that’s the one you ran into, 1 hour window, 15min precision)
Model computation queue, per model (I thought you were running into this one, but obviously not)
The Retry-After header will make it easy to distinguish between these two cases.
