Recently I've started coding a flight simulator using ReactJs and HTML. I've been using GitHub Codespaces to develop the sim. To view the sim, i started a local host and everything worked fine. But when i deployed the same thing to GitHub pages,or hosted it on any website, nothing showed up. Just a blank white screen. Even though i used the same exact code. This code worked in every coding environment (VsCode, GitHub Codespaces, StackBlitz, Replit). My code can be found at https://github.com/abingandabong/abingandabong.github.io
This is because the code for the sim is more than 2000 lines.
The error is happening because the HTML file in the final project is attempting to load ./main.jsx, which is a JSX file, and not a JS file. In order to host the page at its own .github.io subdomain, it needs access to the statically-built .js file that is output, with the JSX transformed to JS.
Your package.json says you are running Vite, so you need to run vite build or your npm build script, and make sure that your output HTML file is pointing to the built JS file, not the source JSX file.
There is also a setting in the GitHub repo config that will let you point to a subfolder as the root of your hosted project, so if that build puts your app in a subfolder, point the repo at that subfolder, make sure all assets are inside of that new folder (relative to where you are loading them from), and it should then work.