TypeError: Cannot read properties of null (reading 'width') - Autodesk APS viewer

Question

While updating an old viewer api to use the latest viewer (script below) I get the error below, from what I have read it is to do with the order in which the script and the div load. however I cant find many details on resolving the issue, any help would be much appreciated?

    private async loadForgeViewerScriptAndStyle(): Promise<void> {          
    return new Promise<void>((reslove,reject) => {
        const forgeviewerjs = document.createElement('script');
        
        forgeviewerjs.id = 'forgeviewerjs';   
        forgeviewerjs.src = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.js';          
        document.body.appendChild(forgeviewerjs);
                   
        forgeviewerjs.onload = () => {
            console.info("Viewer scripts loaded"); 
            const link = document.createElement("link");
            link.rel = 'stylesheet';
            link.href = 'https://developer.api.autodesk.com/modelderivative/v2/viewers/style.css';
            link.type = 'text/css';
            link.id = "forgeviewercss";
            document.body.appendChild(link); 
        console.info("Viewer CSS loaded");  
        reslove();
        };
        forgeviewerjs.onerror = (err) => {
            console.info("Viewer scripts error:"+err ); 
            reject(err);
        }; 
    })
}

Error -

Viewer3D.js:600 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'width')
at Viewer3D.initialize (Viewer3D.js:600:40)
at GuiViewer3D.initialize (GuiViewer3D.js:61:61)
at Viewer3D.start (Viewer3D.js:378:29)
at <anonymous>:663:31

Answer 1

It seems like the div you are passing to GuiViewer3D() does not exist when you are calling viewer.start()

https://aps.autodesk.com/blog/error-after-migrating-away-viewingapplication