Import GLTFLoader in React: SyntaxError: Unexpected token

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.

Did you find the solution? I’m having the same issue with nextjs and the SVGLoader

1 Like

I solve the problem moving the file .gltf to the public repo