SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>)

sample.js:21 SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "... is not valid JSON at JSON.parse ()
at GLTFLoader.parse (GLTFLoader.js:315:21)
at Object.onLoad (GLTFLoader.js:205:11)
at three.module.js:39951:38

That’s the error code I recieve whenever I tried to load a GLTF file, not just the file but also the FontLoader, TTFLoader, also displays such error.

Here’s my code;

import * as THREE from ‘three’;
import {OrbitControls} from ‘three/examples/jsm/controls/OrbitControls’;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader’;

const renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const orbit = new OrbitControls(camera, renderer.domElement);

const loader = new GLTFLoader();

loader.load( ‘…/img/scene.gltf’, function ( gltf ) {

scene.add( gltf.scene );

}, undefined, function ( error ) {

console.error( error );

} );

camera.position.set(0,0,10);
camera.lookAt(0,0,0);
orbit.update();

function animate(){
requestAnimationFrame(animate);
renderer.render(scene, camera);
}

animate();

3 periods? As you can guess from the “< DOCTYPE” error there’s something wrong with your path, check the dev tools network panel to see what the path points to, these should be marked red.

2 Likes

This typically means that the path of the specified asset is incorrect. It’s trying to parse the error response of a missing asset. Check your asset path, try an absolute path to see if that works.

It’s not from the path, I tried moving it to a closer path it still didn’t work, I tried using absolute path, yet I received another error from the server I used.

Please it’s really frustrating me, I don’t understand… The error is clearly pointing to the file in the directory I instructed it to point, the error is coming from the file itself and not from my file.

The error is coming from line 325 in the GLTFLoader.js file, saying that;

const json = JSON.parse( content );

it’s the path. @notchris has already told you what it is, it’s a 404 file not found response the gltfloader is trying to parse as a gltf.

.../ is wrong, ../ would be wrong as well. bundlers collapse your code into a single file, folders and relative paths do not exist. relative paths are for module imports only. you need to put assets into /public and then access them as an absolute path /model.glb. or, you import modelUrl from '../img/scene.gltf', that would work, now the bundler as aware that you need that asset and will include it in /dist with a hashed name.

using a gltf instead of a glb is a mistake as well btw.

1 Like


I did just that yet the same problem, I don’t understand why the bundler doesn’t understand the path.

I tired importing the file using manually using the import keyword, yet It did not work. I also tried putting the file in the dist folder and tried loading the file from there yet same problem, I tried creating a new folder called public and I putted the files in there and tired importing the file from there still the same problem keep coming up…

Please how do I fix it. I haven’t gone anywhere in 3D Development and I’m already facing such issues.

for imports to work you need a loader that knows what “gltf” is. usually bundlers should assume url-loader for unknown extensions, looks like yours doesn’t. still i don’t know why you’re not just using /public, does that not exist in parcel?

I also tried putting the file in the dist folder and tried loading the file from there yet same problem

you need to put it into /public, not /dist. this should be the same for all bundlers and environments, /public is a standard. tbh if your bundler is that stubborn just trash it. npm create vite. i have never used parcel myself, but to me it looks pretty bad tbh. why is it causing you that much trouble …

Put your code back to how it was earlier when you tried using the absolute path and show the actual error text or screen grab of it. What fixes you’ve tried since may be compounding your error.

I thought “surely, it’s not that hard”, but it really was, trying to use parcel to load a glTF in Threejs in CodeSandBox.
Seriously, I had all kinds of issues. The browser locking up all of the time, and the files just not being found no matter what ever I tried.
But it works now.
Spin Suzanne - CodeSandbox