#Vite React app deploy to GitHub Pages not rendering

1 messages · Page 1 of 1 (latest)

tardy river
#

Console error shows : Loading module from “https://<myGithubName>.github.io/src/main.jsx” was blocked because of a disallowed MIME type (“text/html”).
Loading failed for the module with source “https://<myGithubName>.github.io/src/main.jsx”.

I've followed the Vite documentation to deploy to Github Pages, setting the 'base' in vite.config to my Github repo name -> base: '<repo-name>'.

In researching Stack Overflow answers to people who encountered similar errors, they mostly say the 'type' on the <script> tag must be set correctly, but with React there is no such tag.

I'm a little lost as to what I might be doing wrong, especially for such a simple static page application.

https://github.com/ellis3684/quiz-game
https://ellis3684.github.io/quiz-game/

tardy river
#

bump for visibility

smoky swallow
#

It loads the index.html from the root of your repo which tries to load /src/main.jsx and this causes the error. Try building the project first (npm run build) and I’d suggest you to use a separate branch “gh-pages”. You can push the build contents of the dist/ to the gh-pages branch and then you can make github pages to serve from it. You can also automate the building and pushing to gh-pages branch with GitHub Actions.

tardy river
#

That's weird, I did run npm run build first, I'll give it another shot and see if that does the trick

#

Any idea why it might've ignored my dist folder?

smoky swallow
#

.gitignore contains your dist folder which is perfectly fine

tardy river
#

I'm just puzzled why the Vite docs don't mention that setting up a separate branch is a necessity for it to work on Github pages

smoky swallow
#

I’m looking up the deploy.sh script and the push is from the new repo which is initialized in dist/. It pushes from local main branch to remote gh-pages branch. However since this branch doesn’t exist on your repo (at least I don’t see it in the branches list) it fails to push it there.

tardy river
#

Ah so if I were to change that 'git push -f [email protected]:ellis3684/quiz-game.git main:gh-pages' to 'git push -f [email protected]:ellis3684/quiz-game.git main:main' it should work?

smoky swallow
#

I won’t recommend you doing that. It’s a force push and I think it will override the entire repository.

tardy river
#

Ah so the Vite docs assume that you have a gh-pages branch set up?

smoky swallow
#

Try following the github guide. You should only make the gh-pages branch and select it so github pages can read from it. After that the deploy.sh should start working.

smoky swallow
tardy river
#

Interesting - well thank you for your help. I appreciate it. I'll report back with what happened after I try out your advice.

smoky swallow
#

You’re welcome. Good luck.

tardy river
#

Didn't work unfortunately

#

Same error as before

smoky swallow
#

The gh-pages branch has the same structure as the main branch.

tardy river
#

Ah only push dist to gh-pages

#

Yes you mentioned that, my bad

smoky swallow
#

The contents should be what’s inside dist/

tardy river
#

I'll retry

smoky swallow
#

I see it worked

tardy river
#

Yes it worked, thank you. I had trouble pushing only certain changes to a branch but then I found the following solution.
Run 'npm install gh-pages --save-dev'

#

Then add the below two scripts to package.json

#

"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
Then run "npm run deploy"

#

Out of curiosity, do you know of an easier way to only push dist to a branch? I couldn't find out how to do it easier

smoky swallow
#

With gh-pages -d dist or?

tardy river
#

I mean let's say you had my project as it were originally set up with only main branch

#

How would you have npm run build and pushed dist to gh-pages branch

smoky swallow
#

I’d make a custom script in package.json like that: “pages:deploy”: “npm run build && gh-pages -d dist”

tardy river
#

Ah I see, so it seems that's probably the best way to do it after all. Thanks for all your help. I really appreciate it.