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

I had the same problem.
I tried to load .glb model in a react project (React version: ^18.2.0).

The solution for me was to insert the model to the public folder as mentioned before.
When doing so and using it like this:

  const modelLoader = new GLTFLoader();
  modelLoader.load("/assets/models/myModel.glb", ...rest of the code...

Everything works just fine.

P.S

  • Make sure your camera is in the right position and can see the model
  • Make sure you model is not too small or not too big

Hi Proelectrocoder!

For me the problem was also the path.
My fix was to ‘strangely’ delete the first / of the path,
in my example my 3d model is in the folder public/3d/Lom3dExample.glb . In the code:

import { useLoader } from '@react-three/fiber'
import React, { Suspense, useRef } from 'react';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

export function Lom3D(props:any) {
    const gltf = useLoader(GLTFLoader, '3d/Lom3dExample.glb')
    return (
      <Suspense fallback={null}>
        <primitive object={gltf.scene} />
      </Suspense>
    )
}

(don’t put ‘any’ in typescript ^^, it was just for the demo)
I hope it will help you, have a nice day!

UPDATE:
This work the best for me, (like the previous model, the 3d folder is in public) :

import React, { Suspense } from 'react';
import { useGLTF } from '@react-three/drei'; 

export function Lom3D() { 
    const usingGlft = useGLTF('3d/actual3d.glb',true)
    return (
      <Suspense fallback={null}>
        <primitive object={usingGlft.scene} />
      </Suspense>
    )
}

I was also facing the same issue, solved
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas class="webgl"></canvas>
    <script  type="module" src="src/index.js"></script>
</body>
</html>

src/index.js

import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';

const loader = new GLTFLoader();
const downloadUrl = new URL('../Cartoon_boy.glb', import.meta.url);
loader.load(downloadUrl+"/", function(gltf) {
    console.log(gltf);
}, function(xhr) {
    console.log(xhr.loaded/xhr.total * 100);
},function(error) {
    console.log(error);
})

see this two lines it might help
const downloadUrl = new URL(‘…/Cartoon_boy.glb’, import.meta.url);
loader.load(downloadUrl+“/”

package.json

{
  "devDependencies": {
    "parcel": "^2.8.2"
  },
  "dependencies": {
    "three": "^0.147.0"
  },
  "name": "projekt",
  "version": "1.0.0",
  "scripts": {
    "watch": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

No need to keep 3d file in any folder like public or assets it will work fine
I have installed the parcel and three.js file which is latest currently at the time of writing solution.

I have performed particular steps

  1. npm install parcel --save-dev
  2. npm install three
  3. index.html
  4. src/index.js
  5. glb or gltf file
  6. npm init -y
  7. changes in package,json (the one I have done above you can change it accordingly)
  8. npx parcel build index.html
  9. npx parcel index.html

Result → You will be able to see the object of the 3d model in the console.

Hope so it will help.

1 Like