Extensions do not load after the second time in Forge Viewer

Question

I develop the Forge Viewer using Reactjs.

Extensions doesn't load after the second time, when I display the drawing in Forge Viewer.

Extensions that were not loaded.

Autodesk.ViewCubeUi.
Autodesk.BimWalk.
Autodesk.Measure.
Autodesk.Section.
Autodesk.LayerManager.

In the current implementation, the Viewer script is reloaded every time the drawing file changes.

I implemented this script with a reference.

https://github.com/outer-labs/react-forge-viewer

How should I resolve this?

Error log (This is a ViewCubeUi Error, but other extensions as well.)

Uncaught (in promise) Error: Extension not found: Autodesk.ViewCubeUi. Has it been registered(3)?
    at VM26450 viewer3D.min.js:19
(anonymous) @ viewer3D.min.js?v=v7.18:19
Promise.then (async)
loadExtension @ viewer3D.min.js?v=v7.18:19
(anonymous) @ viewer3D.min.js?v=v7.18:24
setTimeout (async)
T.createUI @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
setTimeout (async)
(anonymous) @ viewer3D.min.js?v=v7.18:24
p @ viewer3D.min.js?v=v7.18:19
(anonymous) @ viewer3D.min.js?v=v7.18:24
l @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
forEach.e.<computed> @ viewer3D.min.js?v=v7.18:24
x @ viewer3D.min.js?v=v7.18:24
a @ viewer3D.min.js?v=v7.18:24
Promise.then (async)
x @ viewer3D.min.js?v=v7.18:24
a @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
(anonymous) @ viewer3D.min.js?v=v7.18:24
i @ viewer3D.min.js?v=v7.18:19

Code

The Viewer script is loaded as follows. <ForgeViewer /> component displays the drawing and handles viewer events.

const version = "7.18"
const cssUrl = `https://developer.api.autodesk.com/modelderivative/v2/viewers/style.min.css?v=v${version}`
const scriptUrl = `https://developer.api.autodesk.com/modelderivative/v2/viewers/viewer3D.min.js?v=v${version}`

import React, {useState, useEffect} from 'react'

interface ScriptLoaderProps {
  url: string
  onLoad?: () => void
  onError?: () => void
}

const ScriptLoader: React.FC<ScriptLoaderProps> = ({url, onLoad, onError, children}) => {
  const [ready, setReady] = useState(false)
  useEffect(() => {
    const script = document.createElement('script')
    script.src = url
    script.async = true
    script.onload = () => {
      setReady(true)
      if(onLoad) onLoad()
    }
    if(onError) script.onerror = onError
    document.body.appendChild(script)
    return () => {
      document.body.removeChild(script)
    }
  }, [url])
  if(ready) return <>{children}</>
  return <></>
}

const Viewer = () => {
  return(
    <>
      <link rel="stylesheet" type="text/css" href={cssUrl} />
      <ScriptLoader url={scriptUrl}>
        <ForgeViewer />
      </ScriptLoader>
    </>
  )
}

---

• Chrome 81.0.4044.138(Official Build) (64 bit)
• viewer version: 7.18

Answer 1

Try not to reload the Viewer script otherwise you might run into a strange conflict (or more precisely a deep lying racing condition per our Engineering) loading the extensions and some other dependencies...

This issue has been present since early v7 versions...

It's actually pretty straight forward to come up with your own Viewer component and see an example here - when dealing with multiple components and reloading simply use a state control mechanism (redux etc) to check if the libraries are loaded/being loaded to avoid conflict...

Or else you can customize this component (not exactly supported by us since is 3rd party though) to check if window.Autodesk is already available before attempting to load the scripts...