Build error is using 3js and vite

Questions
1

I am just trying to build a site and i am facing a issue, When i run the site there is no issue normally , when i build the site using

npm run build

and then i gave

npm run preview

These are the error found when building

vite v5.2.11 building for production...
src/components/canvas/Earth.jsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
src/components/canvas/Computers.jsx (1:0): Error when using sourcemap for reporting an error: Can't resolve original location of error.
node_modules/three-stdlib/libs/lottie.js (13062:32): Use of eval in "node_modules/three-stdlib/libs/lottie.js" is strongly discouraged as it poses security risks and may cause issues with minification.
✓ 1062 modules transformed.

it just gave a glimpse of the website and then it stopped and i got these error in the console

Error: Could not load ../../../src/components/canvas/planet/scene_earth.gltf: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    sb http://localhost:4173/assets/index-Cz_fDIj5.js:3870
    a http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3836
index-Cz_fDIj5.js:3866:73
    qp http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    callback http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    Pg http://localhost:4173/assets/index-Cz_fDIj5.js:3864
    Nv http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    Ov http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    MP http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    bP http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    La http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    Hv http://localhost:4173/assets/index-Cz_fDIj5.js:3866
    P http://localhost:4173/assets/index-Cz_fDIj5.js:3852
    j http://localhost:4173/assets/index-Cz_fDIj5.js:3852
Error: Could not load ../../../src/components/canvas/planet/scene_earth.gltf: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    sb http://localhost:4173/assets/index-Cz_fDIj5.js:3870
    a http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3836
index-Cz_fDIj5.js:40:161
Uncaught Error: Could not load ../../../src/components/canvas/planet/scene_earth.gltf: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    sb http://localhost:4173/assets/index-Cz_fDIj5.js:3870
    a http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3836
index-Cz_fDIj5.js:3870:23704
Error: Could not load ../../../src/components/canvas/gaming_desktop_pc/scene_computer.gltf: JSON.parse: unexpected character at line 1 column 1 of the JSON data
    sb http://localhost:4173/assets/index-Cz_fDIj5.js:3870
    a http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3907
    load http://localhost:4173/assets/index-Cz_fDIj5.js:3836

This is my code

"use client"
import React, { Suspense, useEffect, useState } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Preload, useGLTF } from "@react-three/drei";
import CanvasLoader from "../Loader";


const Computers = ({ isMobile }) => {
  const computer = useGLTF("../../../src/components/canvas/gaming_desktop_pc/scene_computer.gltf");


  return (
    <mesh >
      <hemisphereLight intensity={0.40}
        groundColor="white" />
      <pointLight intensity={1} />
      <spotLight
        position={[-20, 50, 10]}
        angle={0.12}
        penumbra={1}
        intensity={1}
        castShadow
        shadow-mapSize={1024}
      />
      <primitive
        object={computer.scene}
        scale={isMobile ? [0.9, 0.9, 0.9] : [1.5, 1.5, 1.5]}
        position={[0, -3.25, -1.5]}
        rotation={[-0.01, -0.2, -0.1]}
      />
    </mesh>

  );
};

const ComputersCanvas = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    // Add a listener for changes to the screen size
    const mediaQuery = window.matchMedia("(max-width: 500px)");

    // Set the initial value of the `isMobile` state variable
    setIsMobile(mediaQuery.matches);

    // Define a callback function to handle changes to the media query
    const handleMediaQueryChange = (event) => {
      setIsMobile(event.matches);
    };

    // Add the callback function as a listener for changes to the media query
    mediaQuery.addEventListener("change", handleMediaQueryChange);

    // Remove the listener when the component is unmounted
    return () => {
      mediaQuery.removeEventListener("change", handleMediaQueryChange);
    };
  }, []);

  return (

      <Canvas
        frameloop='demand'
        shadows
        dpr={[1, 2]}
        camera={{ position: [20, 3, 5], fov: 55 }}
        gl={{ preserveDrawingBuffer: true }}
        style={{ height: "400px" }}
      >

        <Suspense fallback={<CanvasLoader />}>
          <OrbitControls
            enableZoom={false}
            maxPolarAngle={Math.PI / 2}
            minPolarAngle={Math.PI / 2}
          />
          <Computers isMobile={isMobile} />
        </Suspense>

        <Preload all />
      </Canvas>

  )

};

export default ComputersCanvas;

I’ve tried configuring the vite config and there was no improvement does that has any thing to resolve the problem.
I have no idea what cause this error and i am new to it , please help me

2

You cannot use local paths. Put all your assets in public directory and treat it as if it was a root folder served by the web server - if you place model.glb in /public/assets/my-models, you can then load it as /assets/my-models/model.glb.

3

This is my current directory structure

image
image393×637 27.2 KB

image
image393×637 25.2 KB

should i even put the assets outside the src file and the gltf file also ? I just want to be more clear about this.

4

Yep - see vite docs for a detailed explanation.

5

src does not exist. the bundlers job is to bundle, it squashes everything starting from src/index.js into whatever you see in /dist if you build. it builds in dev mode as well. if you fetch something inside source with a string like that, it will lead no where, there is no “src” inside /dist, there is no folder called “assets”.

that’s why /public exists, it’s for all static files, gltf, png, jpg, json, …

6

I do not use local paths but when builing i just get the following error that op also had:

node_modules/three-stdlib/libs/lottie.js (13062:32): Use of eval in “node_modules/three-stdlib/libs/lottie.js” is strongly discouraged as it poses security risks and may cause issues with minification.

What am i doing wrong, cant find a solution online, it is three.js related right?

7

Are you importing things using paths like “node_modules/three-stdlib/…” ?

If yes, just skip the node_modules part - you can import directly as simply “three-stdlib”.

8

No i dont, what i found is that i am importing RoundedBoxGeometry like that:

import { RoundedBoxGeometry } from "three-stdlib";

Thats the only import using three-stdlib. The other occurences of “three-stdlib” are in the yarn.lock and package-lock.json.