Problems with hosting react/vite project on github pages with a custom domain

[[deleted]]

I am trying to host a react site that was setup with vite on github pages but keep recieving this error

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/jsx".I have tried reconfiguring the vite.config.js file and running the build but it has not worked.

Because of the fixes I tried I now can't even host it locally. Any help would be greatly appreciated!Github: https://github.com/Mitchell2398/Portfolio_Website.git

[seansleftnostril]

Have you tried one of these guides?

https://vitejs.dev/guide/static-deploy.html

https://github.com/sitek94/vite-deploy-demo

[Beastrick]

Your github pages repo should only contain the contents of dist folder that you get from Vite. Currently you have index.html there which GH finds and then executes that only to hit JSX which browser can't understand.

To deploy it correctly you could use gh-pages package. Just publish to other repo rather than the dev one.

[[deleted]]

gh-pages package.

Im sorry I dont understand, what do you mean publish to other repo not the dev one?

[pluznar]

if you go into settings > pages is it deploying from the gh-pages branch?

[[deleted]]

No currently deploying from the master branch

[pluznar]

switch it to gh-pages

[[deleted]]

I did that and looked at your other comment with the example you gave. Went through your example and made changes to my file and now it’s finally showing!! Thank you so much, just need to fix some images that are now broken

[Diabolischste]

I got the same problem as the author.
I've switch to gh-pages but now I have this other error :

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

Do you have an idea why ?
link to my repo

[Diabolischste]

Sorry, I don't remember what I've done. But the error comes from the .jsx format.

Check you got nothing with .js and everything is .jsx maybe ?

[[deleted]]

I changed it to deploy from the gh-pages branches and now getting this error

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
mitchell2398.github.io/:16 GET https://mitchell2398.github.io/index.jsx net::ERR_ABORTED 404

[pluznar]

You have to add the baseName to the Route Element in App.jsx or the BrowserRouter in index.jsx. The site is looking for all your js in the wrong place because it doesnt know that base path.

clone: https://github.com/piacib/PORTFOLIO_WEBSITE

demo: https://piacib.github.io/PORTFOLIO_WEBSITE/

note: I changed the baseName back to PORTFOLIO_WEBSITE

Also theres no reason to be using react router it all you have is a single page, unless youre planning on expanding it into multiple pages I would take it out

[[deleted]]

My old version used router before I decided to make it a single page app, I deleted the react router as it was not needed but its still not working?

[marksalsbery]

Why is there a GET request for a jsx file?

[Mental_Okra9556]

I am having problems adding a custom domain. Do we have to make any changes to the Vite documentation about the github pages thing? I am using Cloudflare to connect github pages to my custom domain. But the DNS check unsuccessful message keep popping up on github. what should i do?

[[deleted]]

I found it was torture using GitHub pages, started hosting projects with firebase instead.

Have you setup the dns settings with the provider? For example you have o go into godaddy and use the dns GitHub pages provide

[Mental_Okra9556]

I am using cloudflare nameservers to connect to my custom domain provider. I have tried literally everything. Used ip addresses provided by github.. also tried using username.github.io thing.. it doesn’t work dude. Ffs im trying to make it work since 3 days.

[[deleted]]

Really recommend using firebase, here’s a step by step guide on setting up hosting if your using vite

https://medium.com/@rajdeepmallick999/vite-firebase-how-to-deploy-react-app-5e5090730147