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

proelectrocoder · September 11, 2022, 7:24pm

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();

Fyrestar · September 11, 2022, 7:57pm

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.

notchris · September 11, 2022, 7:58pm

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.

proelectrocoder · September 11, 2022, 9:12pm

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.

proelectrocoder · September 11, 2022, 9:18pm

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 );

drcmda · September 11, 2022, 9:25pm

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.

proelectrocoder · September 12, 2022, 4:05pm

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.

drcmda · September 12, 2022, 4:17pm

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 …

seanwasere · September 12, 2022, 4:33pm

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.

seanwasere · September 12, 2022, 10:55pm

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

MesMesBrio · November 10, 2022, 10:16am

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

MeshMeThePath · November 14, 2022, 4:34pm

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>
    )
}

Leg74end · December 21, 2022, 8:12am

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

npm install parcel --save-dev
npm install three
index.html
src/index.js
glb or gltf file
npm init -y
changes in package,json (the one I have done above you can change it accordingly)
npx parcel build index.html
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.

Muhammad_Usman · April 11, 2023, 7:56am

Hi, mine was also the path issue.
Solution: add the glb model in public folder

public/models/nameOfModel.glb

I created a simple component

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

const NewMapModel = (props) => {
  const { scene } = useGLTF('/models/Northpoint-City-v2.glb');

  return (
    <primitive object={scene} />
  );
};

export default NewMapModel;

and then use it inside of Canvas

sashawhosaid · May 28, 2023, 9:04pm

Hi, for me to add gbl to the public folder go off for the local server, but after deploy my app using aws amplify the error came back.

upd: sovled the problem by adding |glb|gltf| to Rewrites and redirects in the aws amplify console

Yang_Liu · July 12, 2023, 7:14am

It’s the problem of the path. I resolved it by imitating the path of favicon.ico.

hnhtran · April 2, 2024, 9:08am

I got same issue and yes it is the path issue. I follow same instruction as @MesMesBrio stated

My solution:

Create a 3d folder under public folder and put your 3d file in there.
Call it with const { nodes, materials } = useGLTF('/3d/shirt_baked.glb'), import { useGLTF } from '@react-three/drei'

Topic		Replies	Views
Cant load Font \|\| caught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>) Questions loaders	10	1417	April 25, 2023
Why it is getting SyntaxError while building it doesn't throw any error Questions gltf-loader , parcel	7	768	December 20, 2022
Loading JSON files Questions json-loader	7	1553	March 20, 2019
DRACOLoader prints error: SyntaxError: Unexpected token '<' Questions loaders , draco-loader	5	460	August 3, 2023
Uncaught SyntaxError: Unexpected token '<' GLTFLoader Questions loaders	1	720	July 5, 2021

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

Related Topics