title: Unexpected token < in JSON at position 0 - glTFLoader in Three.js and Vue app
body: <p>I want to load a .glTF file into three.js using the GLTFLoader in my Vue app. However, I continue to get this error in the console when I try to load the .gltf file with the GLTFLoader:</p>
  <p><code>Unexpected token &lt; in JSON at position 0 </code></p>
  <p>I have instantiated both Three.js and the GLTFLoader inside a Vue.js component.</p>
  <p>After some research, I can see this is because the HTTP request for the glTF asset returns a HTML site. I have checked the network response and 'modeltest.gltf' content type is 'text/html'.</p>
  <pre><code>Content-Type: text/html; charset=UTF-8
  Status Code: 200 OK 
  Request URL: http://localhost:8080/assets/modeltest.gltf
  </code></pre>
  <p>Following a different thread, the cause of a similar problem was that the web server does not serve a glTF but HTML content (<a href="https://discourse.threejs.org/t/syntaxerror-unexpected-token-in-json-at-position-0/13810/3" rel="noreferrer">https://discourse.threejs.org/t/syntaxerror-unexpected-token-in-json-at-position-0/13810/3</a>). Can the server still be the cause of the problem if I am running the app on local host?</p>
  <p>I have tried converting my 3d model into .obj format and then run the OBJLoader. However the same thing happens as the loader attempts to parse HTML when accessing the 'modeltest.obj' file.</p>
  <p>Is this failure to load glTF connected to the server Vue is running on localhost when I run <code>vue-cli-service serve</code> in terminal? How can I get the glTFLoader to parse my glTF file correctly, not as a HTML?</p>
  <p>I have tried loading the glTF file onto this site and it loads correctly <a href="https://gltf-viewer.donmccurdy.com/" rel="noreferrer">https://gltf-viewer.donmccurdy.com/</a></p>
  <p>Any advice would be much appreciated. Thank you for reading.</p>
  <p>My file structure looks like:</p>
  <pre><code>3D Model Path:
  src/assets/modeltest.gltf
  Vue Component Path:
  src/components/ThreeTest.vue
  </code></pre>
  <p>The code for my Vue component looks like:</p>
  <pre><code>&lt;template&gt;
      &lt;div id=&quot;container&quot;&gt;&lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import * as Three from 'three';
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
  
  export default {
    name: 'ThreeTest',
    data() {
      return {
        camera: null,
        scene: null,
        renderer: null,
        mesh: null,
        model: null,
      }
    },
    methods: {
      init: function() {
        let container = document.getElementById('container');
  
        this.camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
        this.camera.position.z = 1;
  
        this.scene = new Three.Scene();
  
        let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
        let material = new Three.MeshNormalMaterial();
  
        this.mesh = new Three.Mesh(geometry, material);
        this.scene.add(this.mesh);
  
        this.renderer = new Three.WebGLRenderer({antialias: true});
        this.renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(this.renderer.domElement);
  
        // Instantiate a loader
        var loader = new GLTFLoader();
  
        // Load a glTF resource
        loader.load(
          // resource URL
          '../assets/modeltest.gltf',
          // called when the resource is loaded
          function ( gltf ) {     
            console.log(gltf);   
            this.scene.add( gltf.scene);
          },
          // called while loading is progressing
          function ( xhr ) {
            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
          },
          // called when loading has errors
          function ( error ) {
            console.log(error)
            console.log( 'An error happened ' + error );
            
          }
        );
      },
      animate: function() {
          requestAnimationFrame(this.animate);
          this.mesh.rotation.x += 0.01;
          this.mesh.rotation.y += 0.02;
          this.renderer.render(this.scene, this.camera);
      }
    },
    mounted() {
        this.init();
        this.animate();
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
   #container{
     height: 100vh;
   }
  &lt;/style&gt;
  </code></pre>