Null in 8th Wall but not in Aframe?

Question

So, I'm trying to get the position of some text in 8th wall and it keeps erroring as "null" but when I log the same thing in aframe it works just fine.

Aframe HTML & JS

//-- HTML
<a-text id="text" value="This my text" position="-1.5 4 -5" color="#000" scale="1.5 1.5 1.5"></a-text>

//-- JS
const text = document.querySelector('#text');
console.log(text)

8th Wall HTML & JS

//-- HTML
<a-text id="text" value="This my text" position="0 0 0" color="#000" scale=".4 .4 .4"</a-text>


//-- JS
const text = document.querySelector('#text');
console.log(text)

Aframe gives me

<a-text id="text" value="This is how text works!" position="-1.5 4 -5" color="#000" scale="1.5 1.5 1.5">

with a drop down of more info, but 8th wall gives me this

▼ Uncaught TypeError: Cannot read property 'getAttribute' of null at Object. app.js:15:26 at webpack_require bootstrap at (anonymous) bootstrap at (anonymous) dist_b10037af710deed478c4f4e425bebc2509497cc1-8e90da767df8e9b631034f88b9b150fc_bundle.js

Answer 1

Nevermind, I solved it!

In case anyone else comes across the same issue when you export your component from your-component-file.js and import it into the app.js make sure you also add the name of the component into Scene in HTML

So something like this where I happen to use text-anim.js and textAnimComponent

//-- in text-anim.js
const textAnimComponent = () => ({
  init() {
   // with all of your functions in here
  },
})
export {textAnimComponent}

//-- in app.js
import {textAnimComponent} from './text-anim.js'
AFRAME.registerComponent('text-anim', textAnimComponent()) 


//-- in body.html
<a-scene
  text-anim // note: here is where you add your component
  xrextras-gesture-detector
  xrextras-almost-there
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement:true"
  xrweb="disableWorldTracking: true">

 // with all of your other entities

</a-scene>