So I decided to make a project using three.js, react and vite. Later on I realized I did not want to really bother with react, and so the react code in my project is mostly skeleton code (like the default App component, etc). I decided to just leave it like that and focus on learning three.js only basically. My project works fine using npm run dev, but I wanted to deploy it on Github Pages. So I tried to build it using npm run build. It generates a dist folder, with an index.html and an assets folder. Within the assets folder are three files:
index.02582158.css
index.c83bad18.js
vendor.5957e3fb.js
I guess this is some sort of compressed css, and the other two are typescript/typescript react files transpiled?
When I try to run the built dist folder, using npm run serve it says
vite v2.3.8 build preview server running at: Local: http://localhost:5000/
I visit the page and its a black screen, every single error is this:
index.c83bad18.js:1 Uncaught TypeError: Cannot read property 'adjustOrbit' of undefined
adjustOrbit is a member function of an object from an exported class defined in a typescript file. It flashes really quickly, but I saw that npm run build did build this .ts file. So i'm not sure what I am doing wrong.
When I try to put this on GitHub pages, I get a 404 not found on all three aforementioned files. By changing their srcs and hrefs in the index.html inside of the dist from
/assets/index.c83bad18.js to ./assets/index.c83bad18.js for each of the three (add a dot at the beginning of each path), GitHub Pages stops saying 404 not found and simply has the same issue as trying to run the build preview with vite.
Update: If I comment out the code that calls member functions on objects from that exported .ts class mentioned earlier, I get... what I would describe as... 25% of my three.js code actually rendered on screen. Its not functional at all. And just more errors about Uncaught (in promise) DOMException: The element has no supported sources.
I think I found the solution. I say think, because I solved this awhile ago and forgot to write down how I figured it out. I'm pretty sure its because my three.js code couldn't find any of the assets used so the entire project would break when compiled from typescript to javascript. To fix this, I imported all assets used so that they are compiled along with everything else:
import skyboxTop from './assets/skyboxwithsun/top.png?url'
Before I'd do something like
txtLoader = new THREE.TextureLoader("./assets/skyboxwithsun/top.png", callbackfunc)
now I do
txtLoader = new THREE.TextureLoader(skyboxTop, callbackfunc)
But I suppose the reason why it fails is because that asset, top.png gets compiled into some weird filename when vite builds the app, it will be something like c3ga867fj34.png
So because my loaders couldn't resolve these urls, I think thats why everything broke. Importing makes sure that skyboxTop is available at runtime.