I recently embarked on a project utilizing three.js, react, and vite. As I delved deeper into the development process, I found myself hesitant to fully commit to integrating React into my project. Consequently, most of the React code within my project serves as placeholder or skeleton code, such as the default App component. With my focus shifting towards mastering three.js exclusively, I made the decision to proceed with this setup.
While my project functions smoothly when executed using npm run dev
, my aim was to deploy it on Github Pages. Therefore, I proceeded to build the project using npm run build, which resulted in the creation of a 'dist' folder containing an index.html file and an assets subfolder. Within the assets subfolder were three files:
index.02582158.css
index.c83bad18.js
vendor.5957e3fb.js
The first file appears to be compressed CSS, while the remaining two seem to be transpiled TypeScript/TypeScript React files.
Upon attempting to serve the built dist folder using npm run serve
, the console output indicated that the Vite v2.3.8 build preview server was running successfully at: Local: http://localhost:5000/. However, upon visiting the page, all I encountered was a blank screen accompanied by the error message:
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. Despite confirming that the .ts file had been successfully built during the npm run build process, the error persisted without resolution.
Subsequently, when attempting to host the project on GitHub Pages, I encountered 404 errors for all three aforementioned files. By adjusting the source paths and hrefs in the index.html file within the dist directory from
/assets/index.c83bad18.js
to ./assets/index.c83bad18.js
for each of the three files (adding a dot at the beginning of each path), the 404 not found errors ceased. However, the same issue experienced during the attempt to run the build preview with Vite still persisted.
Update: Upon omitting the code calling member functions on objects from the exported .ts class mentioned previously, approximately 25% of my three.js code rendered on the screen. Regrettably, this rendered portion lacked functionality, and additional errors regarding
Uncaught (in promise) DOMException: The element has no supported sources
emerged.