javascript - Tillägg laddas inte efter andra gången i Forge Viewer

Jag utvecklar Forge Viewer med Reactjs.

Tillägg laddas inte efter andra gången, när jag visar ritningen i Forge Viewer.

Tillägg som inte laddades.

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

I den nuvarande implementationen laddas Viewer-skriptet om varje gång ritningsfilen ändras.

Jag implementerade detta skript med en referens.

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

Hur ska jag lösa detta?

Fellogg (Detta är ett ViewCubeUi-fel, men även andra tillägg.)

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

Kod

Viewer-skriptet laddas på följande sätt. <ForgeViewer />-komponenten visar ritningen och hanterar visningshändelser.

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 (Officiell version) (64-bitars)
• visningsprogramversion: 7.18

Svar #1

Försök att inte ladda om Viewer-skriptet, annars kan du stöta på en konstig konflikt (eller mer exakt ett djupt liggande kapplöpningstillstånd enligt vår ingenjörsavdelning) när du laddar tillägg och några andra beroenden ...

Detta problem har funnits sedan de tidiga v7-versionerna ...

Det är faktiskt ganska enkelt att komma på din egen Viewer-komponent och se ett exempel här - när du hanterar flera komponenter och omladdning, använd helt enkelt en tillståndsstyrningsmekanism (redux etc.) för att kontrollera om biblioteken är laddade/laddas för att undvika konflikt ...

Annars kan du anpassa denna komponent (inte exakt stödd av oss eftersom den är tredjeparts) för att kontrollera om window.Autodesk redan är tillgänglig innan du försöker ladda skripten...