We are started using react to build a solution with the viewer integration about 3 months ago (version 3.1.12.4). It worked fine without a hitch. We later ask about problems with interactions and multiple viewers and sessions and you came back with a solution quickly (kudos for that!). However, since the newer version and up (3.1.14.14) the viewer crashes the entire web app because of the peculiar way reacts does its thing. Here is the stack for reference:
Uncaught TypeError: Class extends value undefined is not a constructor or null
at Object../node_modules/@shapediver/viewer.rendering-engine-threejs.standard/dist/types/SDNode.js (SDNode.ts:5:1)
at Object.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Object../node_modules/@shapediver/viewer.rendering-engine-threejs.standard/dist/managers/SceneTreeManager.js (SceneTreeManager.ts:34:1)
at Object.options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at Object../node_modules/@shapediver/viewer.rendering-engine-threejs.standard/dist/RenderingEngine.js (RenderingEngine.ts:52:1)
at Object.options.factory (react refresh:6:1)
Thank you for the example, it’s not quite how I do things in react since I prefer using the functional components because the class extensions have been replaced with hooks a few years ago (new functionalities won’t come to “class extends React.Component” but will with hooks).
I tried pretty much all day to create a minimal example that replicated the same issue that I have without success. What I learnt is that there are potential concurrency issues with useContext hooks and some session helpers I created.
<App>
<SessionContext >
<Panels> // Customizes the sessions through Session helpers
<Viewer/>
</Panels>
</SessionContext >
<Item/> // Customizes the sessions through Session helpers but doesn't know about session information
<App>
// Example of Helper
const UpdateAllSessions = async () => {
var sessions = Object.values(SDV.api.sessions);
sessions?.forEach(session => {
session.customize();
})
}
const UpdateParameter = async (value, paramName, sessionId) => {
const session = SDV.api.session[sessionID];
const paramValue = session.getParameterByName(paramName)[0];
if (paramValue) paramValue.value = value;
}
And I realized that whenever a component (like Item in the example above) contained code that was accessing SDV.api it was crashing the whole thing too. The real implementation somewhat ressembles this altho this lacks useContext hooks that provides information about the active SD session.
I also thought that trying to get as close as the project I had would help but it didn’t, I could not reproduce the error I have while upgrading from 1.12.4 to 1.14.7 (and up), so I’m still at a loss on this.
Until Michael can answer with hopefully more insight, could I ask you if the problem starts precisely at version 1.14.7? Did you try with 1.14.6 and earlier? Finding out exactly which version of the viewer seems to break your setup would be a big help in identifying the cause.
The version 1.14.7 was updated for a previous issue we encountered regarding interaction with multiple viewers. I tried from 1.12.4 up to 1.13.10 which was fine. The break appears at version 1.14.0 with the same error I provided earlier in the thread.
just so you know, we are on this issue with high priority. We evaluated that this is probably an issue with the 3D graphics library that we use internally (three.js), as we updated that package for viewer version 1.14.0. We are continuously working on this and will let you know once we have more information, or hopefully, once it is fixed!
I updated to the newest version but I still get the same error. The error message is slightly different in Firefox, maybe it’ll help :
Uncaught TypeError: class heritage THREE.Object3D is not an object or null
It still refers me to the SDNode.ts as the source of the problem, where a null constructor is possibly passed. On my end, I get the error after the dev build (“react-script start”) where I have the usual warnings about failed parsing like the one below.
WARNING in ./node_modules/@shapediver/viewer/node_modules/@shapediver/viewer.shared.types/dist/index.js ..
Failed to parse source map from '/node_modules/@shapediver/viewer/node_modules/@shapediver/viewer.shared.types/src/index.ts' file:Error: ENOENT: no such file or directory
In the terminal I don’t get much more info than that and the build is successful. When requesting the dev web app, on localhost:port, all I get a blank page, without any shown error (even with the added react boundary errors) but the one I copy-pasted earlier that’s hidden in the console.
I just deployed 1.14.16 with a change to the code that creates this error. Please let me know if this works for you.
I’m sorry that this process is a bit tedious. We have internally already discussed other ideas on how to solve this problem, therefore I’m confident that we have a solution for this soon!
The issue still persist, I hoped that it would at least give us new information, but the error message is the same. If there is anything else I could help with, let me know.
Hello @Antoine_Bouchard,
after a full day of debugging, I found a solution and it is an extremely easy one. Please downgrade react-scripts to 4.0.3. This seems to be working for me.
Background: For some reason react/webpack can’t resolve an external package that I extend. Seems to be either a bug on the packages side or on the webpack/webpack side. I’ll report this issue, but luckily you should now be free to continue without this issue!
Cheers, Michael
This indeed seems to do the trick. If you did open a ticket about this issue with react/webpack or any other package, I’d be interested in reading more about this issue so that I can understand better why reverting back to a previous version did fix it.
sure thing, here is the issue I created on the react project. Let’s see what they have to say. I think that it is either an issue with the react-scripts or webpack (that is used by react-scripts). The require that is set in the code is not resolved even though it should be. I’m really glad that this works now!