I was wondering if I could get some help on hosting a project I’ve been doing. The repository is here: https://github.com/lazipops/Pokepedia
My problem is hosting it on Github Pages. My project works locally with no problem but when I host it on Github Pages, all I see is a blank screen and in the console it says "main.tsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "application/octet-stream". Strict MIME type checking is enforced for module scripts per HTML spec."
Here’s what I see when I host my repo on Github pages enter image description here
My project is also a React app if that helps. What am I doing wrong?
I’m expecting to host it on Github pages
2
Answers
The problem is you deployed "development version" of your React application. When deploying Create React App, you should use it’s build tool. It compiles all content (HTML, JS, CSS, images etc.) into one single directory which then can be deployed.
Try to follow these instructions on how to deploy Create React App on Github Pages:
https://create-react-app.dev/docs/deployment/#github-pages
You already did first two steps (You added "homepage" and "deploy" inside "scripts" to package.json). All you left with is to run "npm run deploy" in your console and ensure that Github Pages loads application from "gh-pages" repository (where ready to deploy version of your React App lives).
Try to use Vercel to host your react app, which will be way easier than GitHub pages. as to my knowledge Github pages requires you to host static websites and doesn’t support react. Which you can still overcome if you exported your build as static you can search how to configure react to do this.
Also you uploaded node_modules to your GitGhub repository. delete them and edit your .gitignore to just
you don’t need to add each module in the file.