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

Questions
1

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

2

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
3

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.

4

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.

5

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

error
error1366×768 78.5 KB

6

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
7

error1
error11366×768 80.7 KB

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.

8

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 …

9

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.

10

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

11

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
1 Like
12

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

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.

14

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

1 Like
15

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

16

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

17

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

My solution:

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

Oh, wow! I’m having this problem too! And it went from . / to / and it worked!
Thanks to everyone here!

19

My problem was that after deployment of my project in github, in package json the “homepage” property was ruining everything, so deleting it did the job. Just wanted to share, in case anyone has the same issue.

1 Like
20

I’m here having the exact same problem. Everything was fine until I made the repo on GitHub just a little while ago. Somehow that changed something that changed my paths. Just wanted to say also that yeah, I got the issue after GitHub deployment.