can't compile react app with forge viewer - can't compile - Autodesk not defined un-def

Question

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)

Bryan Huang · Accepted Answer · 2019-03-14T16:24:34.007

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>
...

edited Mar 14 '19 at 16:24

answered Mar 14 '19 at 14:57

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

Gregor · Answer 2 · 2019-03-14T19:01:59.377

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;

edited Mar 14 '19 at 19:01

answered Mar 14 '19 at 18:27

Gregor

134
8

score 0 · Answer 3 · answered Aug 10 '19 at 08:39

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.

can't compile react app with forge viewer - can't compile - Autodesk not defined un-def

3 Answers3

Linked