Webpack: How to load the module on page load?

Question

Using webpack, I'm creating a Library extension. The issue is that the Library should be loaded from a [certain server.]

The main class of the extension stats with:

class MyExtension extends Autodesk.Viewing.Extension {
  // ...
}

The HTML code:

<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/6.*/viewer3D.min.js"></script>
<script src="lib/extension.js"></script>

The issue is that the Autodesk constant isn't a npm module, so when both JS files are included this error is thrown:

Uncaught ReferenceError: Autodesk is not defined

My question is: How to build this extension in a way it will be evaluated after page load?

Obs: It works when using the webpack dev build but won't work with the production build.

Edit: It works the I load the JS files on the main page. This issue happens when the libs are loaded in an AJAX request (Specifically I'm using it in a Bootstrap tab)

package.json

{
  "name": "extension",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "build": "WEBPACK_ENV=build webpack",
    "dev": "WEBPACK_ENV=dev webpack --progress --watch --log-level=debug"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.0.0",
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.0.0",
    "@babel/polyfill": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel": "^6.23.0",
    "babel-loader": "^8.0.0",
    "css-loader": "^1.0.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-command": "^0.4.1",
    "webpack-dev-server": "^3.1.7"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

Not sure why you're getting that error. What you're describing should work fine: https://jsfiddle.net/qLzvsyk5/2/ — CodingIntrigue, Sep 10 '18 at 11:54
Which version of webpack do you use ? If you made it work for the production build would you ask this question ? (I might have an idea why the prod won't work) — ChrisR, Sep 10 '18 at 12:12

score 0 · Accepted Answer · answered Sep 11 '18 at 08:50

The viewer lib is quite big, you have to have to wait for that viewer3d..min.js has been loaded into your web page. Otherwise, the Autodesk object won't be created in the window object of your web page.

I think it hasn't been completely loaded for a page in AJAX calls, you can verify if the Autodesk object is an attribute of the window like this way for example in the tab content page:

if( typeof window.Autodesk === 'undefined' ) {
    $.getScript( '<external JS>' );
}

Since I only see the package.json here, I have no idea how you implement your app and make the assumption above. If it's incorrect, please consider sharing more details without the confidential parts, or send a none-confidential reproducible case to forge.help [at] autodesk.com

Thanks @Eason. Yes, I used the `typeof` with a `setTimeout` loop to wait for the Autodesk constant and it worked. Anyway, would be grand if you could publish the code as a module, would make our life easier ;) — Rodrigo, Sep 11 '18 at 09:17

score 0 · Answer 2 · answered Sep 11 '18 at 10:50

In your webpack.config.js, configure the UglifyJsPlugin like this:

plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      mangle: {
        keep_classnames: true
      }
    }
  })
]

This will tell the UglifyJsPlugin in Webpack to avoid changing the classnames, so you'll be able to reference to Autodesk.

Webpack: How to load the module on page load?

2 Answers2