// My CODE ======================================================= import * as THREE from “three”; import { OrbitControls } from “three/examples/jsm/controls/OrbitControls”; import { FontLoader } from “three/examples/jsm/loaders/FontLoader” import { TextGeometry } from “three/examples/jsm/geomet…

[image] pravesh_arya: “…/node_modules/three/examples/fonts/helvetiker_regular.typeface.json”, this is not a path. node_modules does not exist, you can’t fetch from it, its only purpose is to be a local dev environment which is then bundled or packed. /dist doesn’t contain node_modules, the bu…

Well I tried that too, but no luck their either… I’m using Parcel, is there a possibility that parcel is creating this problem ? MY CODE =========================================================== const fontLoader = new FontLoader() fontLoader.load(“./assets/fonts/helvetiker_bold.typeface.json”, …

when you run npm run start parcel will bundle your project scripts into the dist folder. Your index.js is trying to download the fonts, relative the parcel web severs webroot, which is dist by default. Look into the dist folder and you will see the bundled files. This is what you see in the brow…

parcel is weird indeed. better use vite, all this bundler nonsense just evaporates. you can’t have /src/assets, it’s not valid. the purpose of /public is that the bundler will copy it blindly into the /dist folder, which is where your app is going to live. if you have /assets inside /src nothing is…

Is this what you mean ? [image]

I’m trying to make sense of what you are saying… I’m relatively new :sweat_smile: Will study parcel a little more in detail… By the way, the ./assets/<file> path is working fine while using jpg / png file, its the font file that is causing the problem :no_mouth:

Wow… moving the font file directly inside dist folder actually worked !!! Thank you sooo much for this advice… I was stuck here since last 3 days :dizzy_face: Thank you so much… means a lot ! :raised_hands:

OK I have a doubt now… keeping the font file inside the assets folder is not working, but the images (jpg & png) within the same folder are getting loaded without any problem. How ???

you can’t go below the dist folder. so ../ in your path does nothing. Most webservers, will not serve files or navigate folders below the webroot. This is for security reasons, otherwise it would be possible to read every folder on your server looking for secrets. In parcel, the dist folder is the…

Cant load Font || caught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>)

Questions

PavelBoytchev April 23, 2023, 1:21pm 3

Is there an answer somewhere in this thread:

Topic		Replies	Views
I am beginner and using parcel v2 with three js first time i have problem in text loading Questions loaders	8	1363	September 26, 2022
Why I can't Load a font from my npm package? Questions loaders , font-loader	8	624	June 11, 2024
Unable to use fontLoader or textGeometry Questions font-loader , textgeometry	5	6684	December 22, 2023
Could not load font.typeface.json Questions loaders	5	2015	October 13, 2021
Why it is getting SyntaxError while building it doesn't throw any error Questions gltf-loader , parcel	7	1216	December 20, 2022

Cant load Font || caught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON at JSON.parse (<anonymous>)

Related topics