A-Frame: Error when using tracked-controls-webxr

Question

I am using the A-Frame watcher plugin to create the scene, I was creating two entities for left and right tracked-controls-webxr. When I start my dev server from webpack I get this error:

core:a-node:error Failure loading node:   TypeError: Cannot set properties of undefined (setting 'buttonStates')
    at init (tracked-controls-webxr.js:25:64)
    at initComponent (component.js:320:10)
    at i.updateProperties (component.js:302:12)
    at i.module.exports.Component (component.js:78:8)
    at new i (component.js:662:15)
    at HTMLElement.value (a-entity.js:332:19)
    at HTMLElement.value (a-entity.js:495:12)
    at HTMLElement.value (a-entity.js:463:14)
    at a-entity.js:249:14
    at a-node.js:127:21

Originally I had the two entities as childs to the camera cause that makes sense to me, but the page wouldn't load, I moved them out the page loads but I still get the errors.

Answer 1

afaik the tracked-controls are supposed to set up thetracked-controls-webxr:

tracked-controls sets two components that handles different Web API versions for VR:

• tracked-controls-webvr
• tracked-controls-webxr

You're getting an error, because tracked-controls-webxr are trying to access tracked-controls and fail - hence Cannot set properties of undefined (setting 'buttonStates').

---

Try using tracked-controls, or mimic their setup