6

I have an aframe project that has been part of a React app and working fine.

Because of various issues I'm trying to seperate the layers

I've added the aframe scene directly into the HTML document

  <body>
      <div id="root" style="height: 100%; width: 100%">

      </div>

      <a-scene>
      </a-scene> 

  </body>

The React part is rendering fine, but AFRAME is crashing with

TypeError: systems[name] is not a constructor

from

 this.systems[name] = new systems[name](this);
 this.systemNames.push(name);

The aframe library is imported via Webpack.

Any ideas what could cause this?

beek
  • 3,522
  • 8
  • 33
  • 86

2 Answers2

1

I've had the same issue when using Aframe trough npm or when adding it with a script tagg when it has a type="module" or defer attribute.

Working script:

<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>

This is probably because you are using custom html taggs with a-frame. So the script should be loaded before it is parsing the html.

Not working (currently on my environment):

<script src="https://aframe.io/releases/1.3.0/aframe.min.js" defer></script>

<script src="https://aframe.io/releases/1.3.0/aframe.min.js" type="module"></script>

>> npm i aframe
import aframe from "aframe";

Would be nice to see some comment/solutions on the not working variants.

Setup:
system: windows 10
bundler: vite
node: v16.13.0
aframe: v1.3.0

Luhn
  • 706
  • 6
  • 15
0

I had the same problem today. I was using Cloudflare with Rocket Loader. That’s why it wasn’t working. Once I disabled it, it worked fine.

Palash Sharma
  • 662
  • 1
  • 10
  • 18