title: Loading a GLTF model with Three JS and React JS
body: <p>I have trouble loading a GLTF file which I downloaded from sketchfab, using React JS. When I try to do it without using React (with a regular index.html and index.js) it works, but when I bring the code inside my React App, it throws an Unexpected token &lt; in JSON at position 0 at JSON.parse error. Here is my code: </p>
  
  <pre><code>import * as THREE from "three";
  import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
  
  
  componentDidMount(){
  
  
      var scene = new THREE.Scene();
      scene.background = new THREE.Color(0xdddddd);
      var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
  
      var width = 100;
      var height = 100;
      var intensity = 1.4;
      var rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
      rectLight.position.set( 1, 1, 10 );
      rectLight.lookAt( 1, 1, 3 );
      scene.add( rectLight )
  
      let renderer = new THREE.WebGLRenderer({antialias: true});
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.getElementsByClassName("three-canvas")[0].appendChild( renderer.domElement );
  
  
      camera.position.z = 5;
      var animate = function () {
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
      };
  
      let loader = new GLTFLoader();
      loader.load(
        "../../public/js_models/apple_iphone_xs_max/scene.gltf",
        ( gltf ) =&gt; {
            // called when the resource is loaded
          console.log(gltf.scene)
        },
        ( xhr ) =&gt; {
          console.log(xhr);
          // called while loading is progressing
          // console.log("The xhr warning isL ",xhr.srcElement.responseText);
      }
        );
  
      animate();
  
    }
  
  
  </code></pre>
  
  <p>I read that it's rendering my index.html which is why it's throwing the error but I can't really find a fix, since I know that the GLTF file is in the correct path.</p>
  
  <p>If there are any insights, I would very much appreciate it. Thank you!</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Network tab when rendering component that includes the gltf file
  <a href="https://i.stack.imgur.com/mC5DB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mC5DB.png" alt="enter image description here"></a></p>