Search code examples
javascriptaframe

Uncaught TypeError: systems[e] is not a constructor when loading A-Frame dynamically

I'm trying to load A-Frame dynamically by attaching it to the head via Javascript like so:

    var script_af = document.createElement('script');
    script_af.type = 'text/javascript';
    script_af.onload = function(){

      //create the scene elements and etc

    }
    script_af.src = 'https://aframe.io/releases/1.2.0/aframe.min.js';
    document.head.appendChild(script_af);

this approach works well with other scripts but with aframe for some reason i get the following error:

Uncaught TypeError: systems[e] is not a constructor
    at HTMLElement.initSystem (a-scene.js:195)
    at HTMLElement.initSystems (a-scene.js:180)
    at HTMLElement.value (a-scene.js:137)
    at HTMLElement.attachedCallback (a-register-element.js:160)
    at m (document-register-element.js:2)
    at l (document-register-element.js:2)
    at HTMLDocument.r.<computed> [as registerElement] (document-register-element.js:2)
    at module.exports.registerElement (a-register-element.js:69)
    at Object.116.../../lib/three (a-scene.js:39)
    at o (_prelude.js:1)

if i add the script tag directly to the head and load the rest of the scene dynamically as usual it works fine.

Why do i get this error and is there a way to fix this?

Solution

  • Turns out i had a leftover aframe tag in the body that i had not removed yet, that somehow was causing the problem, once removed it worked fine.