[SOLVED] Uncaught SyntaxError: Unexpected token '<'

Cagatay_Genc · April 15, 2024, 3:03pm

Hello I’m getting the SyntaxError but on Console it doesn’t point out where to exactly. I can’t find the line where issue persists. I’m recieving this error after I implement the #trucks into code when I delete it problem’s gone no Syntax error on console. Is there an easy way to pinpoint the problematic location exactly? I’ll submit my code just in case. I’m using AR-Portal module.

<div id="overlay" style="display: none" class="absolute-fill">
  <img id="recenterButton" src="./assets/textures/recenter.png" />
  <span id="promptText"></span>
</div>

<a-scene
  responsive-immersive
  landing-page="mediaSrc: #landing-page-video;"
  xrextras-loading
  xrextras-runtime-error
  renderer="colorManagement: true;"
  xrweb="allowedDevices: any; disableDefaultEnvironment: true;">
  <xrextras-resource id="landing-page-video" src="./assets/moon-portal.mp4"></xrextras-resource>

  <!-- We can define assets here to be loaded while the load screen is displayed -->
  <a-assets>
    <!-- models -->
    <a-asset-item id="portal-rim-model" src="./assets/models/portal.glb"></a-asset-item>
    <a-asset-item id="moon-model" src="./assets/models/moon-ground.glb"></a-asset-item>
    <a-asset-item id="platform-model" src="./assets/models/platform.glb"></a-asset-item>
    <a-asset-item id="flag-model" src="./assets/models/flag.glb"></a-asset-item>
    <a-asset-item id="tower-model" src="./assets/models/untitled.glb"></a-asset-item>
    <a-asset-item id="rocks-model" src="./assets/models/rocks.glb"></a-asset-item>
    <a-asset-item id="shuttle-model" src="./assets/models/shuttle.glb"></a-asset-item>
    <a-asset-item id="ss-model" src="./assets/models/low_poly_space_station.glb"></a-asset-item>
    <a-asset-item id="corner" src="./assets/models/corner.glb"></a-asset-item>
    <a-asset-item id="plane" src="./assets/models/plane.glb"></a-asset-item>
    <a-asset-item id="plane2" src="./assets/models/plane2.glb"></a-asset-item>
    <a-asset-item id="house1" src="./assets/models/house1.glb"></a-asset-item>
    <a-asset-item id="house2" src="./assets/models/house2.glb"></a-asset-item>
    <a-asset-item id="house3" src="./assets/models/house3.glb"></a-asset-item>
    <a-asset-item id="trucks" src="./assets/models/trucks.glb"></a-asset-item>
    <!-- textures -->
    <img id="skybox-img" src="./assets/textures/skybox.jpg" />
    <img id="blob-shadow-img" src="./assets/textures/blob-shadow.png" />
    <img id="satellite-img" src="./assets/textures/satellite.png" />
    <video
      id="portal-video"
      muted
      autoplay
      playsinline
      crossorigin="anonymous"
      loop="true"
      src="./assets/textures/portal-video.mp4"></video>
  </a-assets>

  <!-- Camera -->
  <a-camera id="camera" position="0 9 11"> </a-camera>

  <!-- Hider walls -->
  <xrextras-opaque-background remove="true">
    <a-entity id="hider-walls">
      <a-box scale="100 1 100" position="0 -1 49" xrextras-hider-material></a-box>
      <a-box scale="100 100 1" position="0 50 75" xrextras-hider-material></a-box>
      <a-box scale="100 1 100" position="0 100 49" xrextras-hider-material></a-box>
      <a-box scale="1 100 100" position="-30 50 50" xrextras-hider-material></a-box>
      <a-box scale="1 100 100" position="30 50 50" xrextras-hider-material></a-box>
      <a-ring
        id="portalHiderRing"
        radius-inner="0.001"
        radius-outer="100"
        position="0 7.5 -0.2"
        xrextras-hider-material></a-ring>
    </a-entity>

    <a-entity id="portal-wall">
      <a-circle
        radius="5.2"
        rotation="0 180 0"
        position="0 7.5 0"
        scale="0.8 0.8 0"
        xrextras-hider-material></a-circle>
      <a-circle
        radius="5.2"
        rotation="0 180 0"
        position="0 7.5 0.25"
        scale="0.8 0.8 0"
        xrextras-hider-material></a-circle>
    </a-entity>
  </xrextras-opaque-background>

  <!-- Lights -->
  <a-entity
    light="
      type: directional;
      castShadow: true;
      shadowMapHeight:2048;
      shadowMapWidth:2048;
      shadowCameraTop: 35;
      shadowCameraBottom: -20;
      shadowCameraRight: 40;
      shadowCameraLeft: -10;
      target: #portalRim"
    xrextras-attach="target: portalRim; offset: 18 7 14"
    shadow>
  </a-entity>

  <a-light type="ambient" intensity="0.3"></a-light>

  <!-- Portal Contents -->
  <a-entity id="portal-contents">
    <a-entity
      gltf-model="#moon-model"
      reflections="type: static"
      rotation="0 180 0"
      position="8 -0.5 -5"
      scale="0.3 0.3 0.3"
      shadow="cast: false">
    </a-entity>

    <a-entity
    gltf-model="#shuttle-model"
      rotation="0 0 0"
      reflections="type: static"
      position="14 35 143"
      scale="4 4 4"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#corner"
      rotation="0 270 0"
      reflections="type: static"
      position="-9 0 143"
      scale="0.2 0.2 0.2"
      shadow="receive: false">
    </a-entity>    

    <a-entity
      gltf-model="#platform-model"
      rotation="0 -90 0"
      reflections="type: static"
      position="-0.4 0 -10"
      scale="9 9 9"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#ss-model"
      rotation="35 -75 45"
      reflections="type: static"
      position="-0.4 300 -10"
      scale="30 30 30"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#plane"
      rotation="35 -75 45"
      reflections="type: static"
      position="80 95 -40"
      scale="5 5 5"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#plane2"
      rotation="45 -85 55"
      reflections="type: static"
      position="50 75 -10"
      scale="6 6 6"
      shadow="receive: false">
    </a-entity>    

    <a-plane
      material="src: #satellite-img; transparent: true; roughness: 0.8; metalness: 0"
      rotation="0 30 0"
      position="-200 150 -250"
      scale="120 80 1"
      shadow="receive: false">
    </a-plane>

    <a-entity
      gltf-model="#flag-model"
      rotation="0 30 0"
      reflections="type: realtime"
      position="-14 0 -43"
      scale="5 5 5"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#trucks"
      rotation="0 30 0"
      reflections="type: realtime"
      position="-14 0 -43"
      scale="5 5 5"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#house1"
      rotation="0 0 0"
      reflections="type: realtime"
      position="-150 0 -43"
      scale="30 30 30"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#house2"
      rotation="0 0 0"
      reflections="type: realtime"
      position="-150 -15 100"
      scale="30 30 30"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#house3"
      rotation="0 180 0"
      reflections="type: realtime"
      position="0 0 -140"
      scale="70 40 40"
      shadow="receive: false">
    </a-entity>

     <a-entity
      gltf-model="#tower-model"
      rotation="0 30 0"
      reflections="type: static"
      position="14 -3.85 -143"
      scale="0.5 0.5 0.5"
      shadow="receive: false">
    </a-entity>

    <a-entity
      gltf-model="#rocks-model"
      reflections="type: static"
      position="-5 1 -42"
      scale="3 3 3"
      shadow="receive: false">
    </a-entity>

    <a-sky src="#skybox-img" rotation="0 7 0"></a-sky>
  </a-entity>

  <!-- Portal -->
  <a-entity
    id="portalRim"
    gltf-model="#portal-rim-model"
    spin="axis: x; speed: 14000"
    reflections="type: realtime"
    position="0 7.5 0"
    rotation="90 -90 -90"
    scale="0.001 0.001 0.001"
    shadow="receive: false">
  </a-entity>

  <a-entity
    id="portalVideo"
    auto-play-video="video: #portal-video"
    material="shader: chromakey; src: #portal-video; color: 0 0 0; blending: additive; side: front"
    geometry="primitive: plane; height: 1; width: 1;"
    position="0 7.5 0.1"
    scale="0.001 0.001 0.001">
  </a-entity>

  <a-circle
    id="portalShadow"
    radius="0.5"
    material="src: #blob-shadow-img; opacity: 0.65; roughness: 0.8; metalness: 0"
    position="0 0.01 1.25"
    rotation="-90 0 0"
    scale="0.001 0.001 0.001">
  </a-circle>
</a-scene>

Ian · April 15, 2024, 6:28pm

If you are using draco compression you need to add this line to your a-scene

gltf-model="dracoDecoderPath: https://cdn.8thwall.com/web/aframe/draco-decoder/"

As shown in the example project here:

Cagatay_Genc · April 16, 2024, 7:57am

Thank you Draco was the issue, my problem have been solved!

Topic		Replies	Views
Multi Scene webAR demo has error 🧑‍💻 Technical Support	7	108	February 27, 2024
Issue with Inworld Integration: Errors Across SDK Versions on 8th Wall, on both version 9 and 8th 🧑‍💻 Technical Support inworld	1	5	December 2, 2024
Json errors when using ecs.GltfModel.set()? 🧑‍💻 Technical Support studio	4	37	September 27, 2024
8th Wall Renderer Causing Issues 🧑‍💻 Technical Support	10	134	June 21, 2024
Error query when changing GLB files or starting a new project 🧑‍💻 Technical Support FAQ	3	91	May 15, 2024

[SOLVED] Uncaught SyntaxError: Unexpected token '<'

Related topics