Aframe not registering component

Question

I am a teacher whose class is using Aframe to create VR websites. One of my students is having an issue where he cannot get his navigation to work to take the user to a different page.

The code he is using in JS is:

AFRAME.registerComponent('schoolMap', {
    init: function () {
        let redirect = () => {
            window.location.href = "schoolMap.html";
        }; //link

        this.el.addEventListener('click', redirect);
    } //init
}), //end

This code was given as an example and is exactly the same as working code that I have managed to make. The script is imported and the component has been added onto the entity.

<a-entity id="main map" position="-0.11914 2.775 -1" rotation="0 45 0" schoolMap>

When I look at his website in the inspector view it shows that the entity doesn't have any components attached despite the component being registered on the entity as shown above.

'main map' entity with no components attached

If the add component button is selected, the registered component can be found and added, which then makes it work. Nothing I have tried has seemed to work to fix the problem so any help would be greatly appreciated.

Also note that we are using Replit as an online IDE as it facilitates class projects, don't yet know if that could be causing the issue.

Answer 1

My guess would be the capital "M" in the schoolMap. You should see a log:

core:component:warn The component name `schoolMap` contains uppercase characters, 
but HTML will ignore the capitalization of attribute names. 
Change the name to be lowercase: `schoolmap` 

If you change it and the script is before the scene (no defer attributes in the script), It should be working:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("school-map", {
    init: function() {
      console.log("yo")
    }
  })
</script>
<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" school-map></a-box>
</a-scene>