Error when building a react app

First of all, great work guys! I read your medium posts and had to try out the library. 👏 I’m trying to integrate 3d view and ar features in my existing react project. But I’m getting the following error:

index.js:1 SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js:213)
    at Object.onLoad (GLTFLoader.js:145)
    at XMLHttpRequest.<anonymous> (three.module.js:36216)

I’ve made a WebARTest component, then import and render it in App.js. This is how my code looks:

import View3D, { GLTFLoader } from '@egjs/view3d';
import React, { useRef, useEffect } from 'react';
import './viewstyles.css';

const WebARTest = () => {
  const canvasElement = useRef(null);

  useEffect(() => {
    const view3d = new View3D(canvasElement.current);
    const loader = new GLTFLoader();
    loader
      .load('./assets/specstand.glb')
      .then((model) => {
        view3d.display(model);
      })
      .catch((e) => {
        console.error(e);
      });
  }, [canvasElement]);

  return (
    <div id="view3d-wrapper">
      <canvas id="ar-canvas" ref={canvasElement}></canvas>
    </div>
  );
};

export default WebARTest;

I’m following the instruction listed on your tutorial page for loading a model.

[WoodNeck]

@devhims I’m glad to hear that 👍 Don’t worry about filing more issues. I may be slow to respond if I’m working on other things, but I’ll check yours soon as I can 😃

[WoodNeck]

@devhims Hmm, in that case I assume that file is not loaded as a static file but in the format of a HTML page. Check what it shows on the ./assets/specstand.glb page and if it shows a HTML page, fix the config to serve static files on the assets folder. In other way, moving the 3D model to the public folder will work I think.