Blank page when deploying react made by vite to github pages

Question

I have been struggling a lot to tackle this problem but still I cannot find the right answer.

When I try to deploy my react app made by vite to github pages, there is a blank page. But locally, it works perfect.

This is the page I have deployed.

And this is my github repository.

I've already checked several options:

• my base is set to base: "{soheum.github.io}" in vite.config.ts file
• tried deploying with vite.config.ts and vite.config.js
• in my package.json I have included "homepage": "https://soheum.github.io/soheum.github.io"

And there is this error in my console log:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTML spec.

Are there any ways to fix this..?

Thanks a lot!

Answer 1

edit: Solved: github pages deployment was targeting main branch with pure react code, instead of gh-pages branch that only contais the "dist" folder contents. Just go to repository settings, Pages, point to your gh-pages branch.

Let me make this easy for you:

1. cd to root of your project;

2. run: npm i gh-pages --save-dev

3. add the deploy script inside your package.json:

   "scripts": { "dev": "vite", ... "deploy": "gh-pages -d dist" },

4. run npm run build if you haven't done yet, so you generate a dist folder with your build

5. run npm run deploy

this will create a gh-pages branch with only ur build, and all you need to do now is go to your Repository SETTINGS, open Pages section on the left, and configure it to point to the GH-PAGES branch instead of the MAIN branch.

---

Facing same problem but with (“text/html”)...

A module loading from “https://gxxxxxx.github.io/src/main.tsx” was blocked due to disallowed MIME type (“text/html”).