'Dojox is only sporadically loading

I'm creating a Vue application and am using Dojox for some graphic stuff.

In the mounted hook of one of my components I try to create a surface. However, this only works half the time.

mounted() {
    this.surface = dojox.gfx.createSurface("Editor", "100%", 700)
}

The other half of the time I get the following error: dojox.gfx.createSurface is not a function I load dojo and dojox in my index.html file which looks like this:

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.14.1/dojo/dojo.js"></script>
    <script type="text/javascript" charset="utf-8" src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojox//gfx.js"></script>
  </head>

What is causing this error and how would I go about fixing it?

EDIT1: When using console.log to see if dojox is defined it will show that it is defined. So is dojox.gfx which does have a 'createSurface' method. Once I want to call the method though, it is not defined.

EDIT2: It seems to have to do with the speed at which the library loads. When I set a timeout like this

setTimeout(() => {
            this.surface = dojox.gfx.createSurface("Editor", "100%", 700)  
        }, 1000)

It will basically work 99% of the time. Now I just have to find out how to make the component wait with loading untill

javascripthtmlvue.jsdojodojox.gfx


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions