ThreeJS Font Vercel Error: Failed to load resource: /static/helvetiker_regular.typeface.json:1 the server responded with a status of 404 ()

Question

I am testing the THREEJS TextGeometry feature, and I have created a 3D Text with it, and it runs absolutely fine on localhost, but when I deploy to Vercel, I get the mentioned error.

Below is the App.jsx file code, and the three.js file contains a part of the code where the error exists:

App.jsx Code

import './App.css'
import './three.js'

function App() {

  return (
    <>
      <canvas className="webgl"></canvas>
    </>
  )
}

export default App

Below is the snippet of the code, where the error exists

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";
import { FontLoader } from "three/examples/jsm/loaders/FontLoader";

const loader = new FontLoader();

loader.load(
    "../static/helvetiker_regular.typeface.json",
      function (font) {
      const geometry = new TextGeometry("Hello three.js!", {
        font: font,
        size: 0.5,
        height: 0.2,
        curveSegments: 5,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 4,
      });

      geometry.center();

      const material = new THREE.MeshNormalMaterial();

      const text = new THREE.Mesh(geometry, material);
      scene.add(text);
    }
  );

I tried changing the location of the font file, but still it didn't work. By the way, the font is a JSON file. I have attached the relevant screenshots of the file structure, and also the screenshot of the console error that I get after deploying on Vercel

Folder Structure

After Deployment Console Error

Answer 1

Create instance of FontLoader

const loader = new FontLoader();

Modify your folder tree (try add after static folder fonts and throw there .json and set this path: "/fonts/helvetiker_regular.typeface.json"

Update:

Try set (if you have different settings in Vite.config)

export default {
    root: 'src/',
    publicDir: '../static/',
    base: './',

And try import as well font

import typefaceFont from 'three/examples/fonts/helvetiker_regular.typeface.json'

And try (yes, I read that you tried, but I am not sure in this location) throw font to public folder, I remember I had similar issue with glb file, this not good habit but that fixed my problem.