React, Three, JSON weird error

Questions
, ,
1

Hi everybody,

I’ve got a problem with react-three-fiber and 3d assets. I use useGLTF from drei what does quite what I want, and everything was nicely working until today (I made a build from my app to test it online).

The steps are the following :

  • Last week all my gltf/glb were loading
  • If I import a new model in my app, everything works (it loads, it’s there)
  • If I run npm-run-build (URL for production is configured in the package.json) it builds the app without mistake
  • As I think the build refreshes something, after it did the build, it returns me the following error :
    (classical one) → JSON.parse: unexpected character at line 1 column 1 of the JSON data

The fact is that at some point it works, and then stops working.
The code (that worked and does not work anymore, but that worked very well) :

import React, { useRef } from ‘react’
import { useGLTF } from ‘@react-three/drei/useGLTF’

export default function Model(props) {
const group = useRef()
const { nodes, materials } = useGLTF(’/twitter.glb’)
return (
<group ref={group} {…props} dispose={null}>

<mesh material={materials.initialShadingGroup} geometry={nodes.twitter.geometry} rotation={[Math.PI / 2, 0, 0]} />

)
}

useGLTF.preload(’/twitter.glb’)

And a link where the project is hosted : https://dgudge.com/meteo

All the “basic 3D (cubes, cones)” work well.

I think there might be a problem with my server configuration not reading those files as JSON as this error seems to occur oftenly in that case…
… did somebody encountered that error.

Just to remind, it worked very well with the exact same code… and does not seem to recognize json anymore…

Thanks everybody ! Have a very nice week :slight_smile:

2

I also tried with a basic Suzanne example, with the same GLTFJSX classical structure. It firs works, it then works with my GLTFJSX generated .js, then I build and then it crashes with JSON issues.

3

The error is fixed on local side with setting the homepage to homepage to “.” in the package.json, but not fixed when updating it to a prod URL… it does not seem to be a three issue.

4

the json errors always come from threes loaders. that happens if path is wrong, file corrupt, or typo in the filename, in that case they try to parse the html 404 not-found error. you immediately see it in chrome dev tools, the broken fetch appears red. that it doesn’t work in prod means that the bundler isn’t aware of that file, it doesn’t exist in the dist folder.

as always, import your models

import modelUrl from "./model.glb"

the bundler will add model.glb to the dist and create a hashed url. it can be within /src. this is the most explicit option. you have more control over cache and you wouldn’t even have to wonder about what happend, even the IDE while typing it out would yell at you if the path isn’t right.

or put the model into your public folder, in that case you don’t import and simply give a non relative url “/model.glb”

this is neither a three nor a r3f problem. it’s just imports and bundling.

5

Hi ! Thanks for your answer ! The problem here is that it only occurs after the build, not during dev. I tried both the solutions you say but the only thing that fixes the problem on local side is :
Capture d’écran 2021-02-09 à 10.24.23
In package.json…
I tried production URL for production server, this way with the dot… I can’t figure out how to make it work on a server.

6

Ok @drcmda you were right, it was a loader problem.

useGLTF(‘model.glb’)

instead of

useGLTF(’/model.glb’)

in my case because of how my app URL is configured…