XR8 is not defined (Three JS)

🧑‍💻 Technical Support
1

Hi, I have a project for face tracking and getting this error recently that just came up.

Uncaught ReferenceError: XR8 is not defined

This happens on project loading and specifically on the app.js page
Below is my code:

import './index.css'
import {runFacePipeline} from './run-face-pipeline'

const startApp = {
  init() {
    runFacePipeline()
  },
}

window.XR8 ? startApp.init() : window.addEventListener('load', startApp.init)

The only fix I have found is super janky and it is to wait for XR8 to load and try by setTimeout

import './index.css'
import {runFacePipeline} from './run-face-pipeline'

const startApp = {
  init() {
    runFacePipeline()
  },

  waitForXR8() {
    // Check if XR8 is available
    if (window.XR8) {
      this.init()  // Initialize if XR8 is available
    } else {
      // If not, wait and check again after a short delay
      setTimeout(() => this.waitForXR8(), 100)
    }
  }
}

// Start checking for XR8 when the window loads
window.addEventListener('load', () => startApp.waitForXR8())

I would like to know if there is a better way to do this and not have to wait like this for XR8 to load. As this is a new problem and has been an issue.

2

You can use the ‘realityready’ event.

    this.el.sceneEl.addEventListener('realityready', () => {
      // console.log('hello world')
    })

Keep in mind it needs to attach to the AFrame scene.

3

Yes saw that there was another post a month back about the same issue but specifically for Aframe, I am using ThreeJS so a bit different of a setup

4

try using the xrloaded event instead :slight_smile:

window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
1 Like
5

@Evan Thats actually the original way I had all my threejs face try on projects. Just recently it stopped working and being intermittent which lead me to doing this setTimeout method which isn’t optimal. Didn’t know if anything could of possibly changed in 8th wall

6

Are all references to XR8 wrapped inside of the event handler for the xrloaded event? You could also try adding some logs to sanity check - for example:

const onxrloaded = () => {
  console.log('xrloaded')
  console.log(window.XR8)
}
window.XR8 ? onxrloaded() : window.addEventListener('xrloaded', onxrloaded)
7

Yeah did that as the first try when debugging once this intermittent bx started. I am at a loss

8

What is the console output with these logs added when the issue occurs?