3

we want to move some of our forge viewer code base into a react-app and can't figure out how to use the viewer3d js api without appending all Autodesk.Viewer.... usages in our components with window.* This works in all the (excellent and extensive) git samples we've studied. why? we load the viewer3d.js file in the index.html between the and the react landing :

<body>
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
  <div id="root" />

the error we get (for every instance of usage of the Autodesk namespace):

Failed to compile

./src/components/Viewer.js
  Line **:  'Autodesk' is not defined  no-undef

this works:

this.viewer = new window.Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)

this doesn't work:

this.viewer = new Autodesk.Viewing.Private.GuiViewer3D(this.viewerContainer)
Gregor
  • 134
  • 8

3 Answers3

6

As mentioned in this user guide, you need to explicitly read any global variables from window. Put this at the top of the file and it will work:

const Autodesk = window.Autodesk;

And it's recommended to yank your script tag to the header section of your app's entry html to make sure it gets loaded prior to the React emits:

<!DOCTYPE html>
<html lang="en">
  <head>
  ...
  <script src="https://developer.api.autodesk.com/derivativeservice/v2/viewers/viewer3D.js?v=6.0" />
  </head>
...
Bryan Huang
  • 5,247
  • 2
  • 15
  • 20
  • Sorry just dug out some doc re this - didn't run into this myself but I was using TypeScript which might be the reason. – Bryan Huang Mar 14 '19 at 16:24
0

we resolved this by putting a global in the first row of our component files. based on this.

/*global Autodesk*/

but, i do like this one even better, right behind the imports. thank you, Bryan.

const Autodesk = window.Autodesk;
Gregor
  • 134
  • 8
0

I have prepared a autodesk-forge-viewer typing module, you can use it to verify types during compilation.

It is used this way:

import Autodesk from 'autodesk-forge-viewer';
const autodesk: typeof Autodesk = (window as any).Autodesk;

For some limitations of type latest TypeScript the type will be Autodesk and the value will be autodesk, so here is the code to create a Viewer instance:

const viewer: Autodesk.Viewing.Private.GuiViewer3D = new autodesk.Viewing.Private.GuiViewer3D(viewerContainer);

Please take a note that autodesk-forge-viewer module doesn't include Viewer implementation, so you still must add viewer3D.js script to the index.html.

Mikhail Zhuravlev
  • 969
  • 2
  • 10
  • 22