Hi, I’m new to three js and have been facing difficulties to make this work in reactjs.
This is how I import the loader:
import React from “react”;
import * as THREE from “three”;
import { GLTFLoader } from “three/examples/jsm/loaders/GLTFLoader.js”;
But when I run my project, it keeps giving me SyntaxError: Unexpected token { pointing on the import {GLTFLoader} line. Below is the screenshot of the error.
Can anyone help me to make this work? I’ve been looking over the docs, examples and tutorials all around the web and they all use the same import method. This is my project dependency:
“dependencies”: {
“next”: “9.5.2”,
“react”: “16.13.1”,
“react-color”: “^2.18.1”,
“react-dom”: “16.13.1”,
“sass”: “^1.26.10”,
“three”: “^0.119.1”
}
Three shouldn’t be affected by the presence of react.js or any other library on the page since it’s safely namespaced. Which build tools are you usinig?
edit
Ahh i see, it’s next.js. Do you get any other errors?
No, just that. If I try to load from ‘examples/js/loaders/GLTFLoader’, I got THREE undefined, even though I imported threejs as THREE on the line above it. I tried importing other stuff from examples/jsm but they all ended up with the same syntax error.
Maybe I’ll try without nextjs to see if it’s causing the problem.
HEllo , hai i tried this in react to load my gltf
GLTFLoader.js:198 SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "... is not valid JSON
at JSON.parse ()
at GLTFLoader.parse (GLTFLoader.js:323:1)
at Object.onLoad (GLTFLoader.js:218:1)
at three.module.js:41311:1
getting the above error message, i already moved it to assets folder in public
