You can create a vite.config.js file that makes use of relative paths throughout your project possible in dev as well as when building for deployment…
// vite.config.js
export default {
base: './'
}
You can create a vite.config.js file that makes use of relative paths throughout your project possible in dev as well as when building for deployment…
// vite.config.js
export default {
base: './'
}
That solution doesn’t work for me, because I’m running react and react three fiber… I’m diving deep into vite configuration files… I had no idea it was this deeply complicated.
This shouldn’t matter for the suggestion above, in that case you’ve definitely got an issue with your paths, any chance you can provide an image of your folder hierarchy tree as well as a couple of your typical path references throughout your project?
TL;DR it works now, I’m not sure how I fixed it but I was probably the real problem. Thank you everyone!
my vite.config.js looks like this:
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
});
And my project structure is like this:
project
├── package.json
├── vite.config.js
├── eslint.config.js
├── postcss.config.cjs
├── tailwind.config.js
├── yarn.lock
├── index.html
├── "other files"
├── node_modules
└── public
├── models
├── textures
└── src
├── App.jsx
├── main.jsx
├── assets
└── components
├── Scene.jsx
├── MapModel.jsx
├── Zombie.jsx
└── "other files etc."
The most frustrating part is that somehow git(or something? changed the settings from “./” to “/” when it comes to the reference to the public folder(or what is the base location) when I initiated the repo. (I should have done that from the very start, I really know that now, again)
But! Why? How? Where exactly is the lines that was changed??
This morning I was going through everything again and…
Oh… this is even more frustrating. Have you ever spent a whole day researching a problem, googling, digging and looking through files on your hard-drive, cursing, pulling your hair and eventually realizing that the problem is actually you?
Yesterday I moved a folder holding unused models. NOW I realized, looking really closely at the inspector errors:
“oh, that file isn’t there, because that folder isn’t there anymore right?”
One component I’d made to compare two models was referring to the model in the unused folder…
It threw the same kind of error: (SyntaxError: Unexpected token ‘<’, “<!DOCTYPE “… is not valid JSON at…) when it didn’t find the file the component was trying to reach.
I no longer know what fixed the original problem, if I fixed the issue with base path being "./"or “/” with any of these:
This is what I know I’ve done:
Anyway, now it’s working without any errors, the path for my models that are in a models folder in the public folder is: “./models/model.glb” like it was from the start.
I can continue with the project!
I just want to show my appreciation for this community and everyones help and effort, I’ve read so many posts in this forum and I’ve found solutions for so many things!
Thank you!
the base definition can be used alongside plugins eg…
// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
base: './',
plugins: [react()],
});
Hello I don’t know if the issue have been resolved or not (too long to read…) but I faced the same problem , my gltf model (.glb file) was in the public folder and I was specifying the path in my gltfLoader (I am using React + Vite) was “./public/model.glb” ,I just changed that to “./model.glb” build it again and it worked. I believe it’s because the public folder is a virtual entity which exists only on the side of devs and at the build time all it’s code is dumped into dist/ folder hence ./public doesn’t exist.