Github Pages. Link empty and Error: Failed to load module script

Question

I'm trying to upload a project on Github Pages but when I visit the link I get a white page with nothing and the following error in the console:

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.

It refers to the main.jsx:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

Any idea what could be going on?

Not really. We would need to see more code. Like package.json and steps to deploy. Have you tried following this guide: create-react-app.dev/docs/deployment/#github-pages — g0rb
– g0rb, Commented Sep 16, 2022 at 20:35
Thanks for that, that guide was very helpfull. Now I have another problem. I can't update changes in my repo after deploying it. — Noe Caseres
– Noe Caseres, Commented Sep 20, 2022 at 18:39

Murilo Lodovico · Accepted Answer · 2023-04-06 05:05:09Z

1

maybe you having the same problem tha I had, I did all the config that was necessary by github, but I forget to build de main project. Build the main project, by runing the command, specifically in the same level of package.json file::

npm run build

After that you'll hava a folder called dist, this was the solve for my problem, my project use Vite.

You can also check this link that a used to solve my problem: https://vitejs.dev/guide/static-deploy.html

Best regards man.

edited Apr 6, 2023 at 5:05

answered Apr 6, 2023 at 4:57

Murilo Lodovico

113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

fatihyildizhan · Accepted Answer · 2023-01-07 19:06:03Z

0

It`s showing up because you open the react app with the live server. Instead you should run it with npm.

Open the terminal and run:

$ npm run dev

And click on the link that it`s providing you. Whenever you wanna open the app you have to do this step. it works just like a live server but actually, it hosts your app on a local host.

edited Jan 7, 2023 at 19:06

fatihyildizhan

8,8207 gold badges68 silver badges92 bronze badges

answered Jan 6, 2023 at 18:50

Layth ALi

1

Comments

Nuwan wickramarachchi · Accepted Answer · 2023-12-27 08:41:14Z

0

The error you're experiencing is a common issue when trying to serve JSX files directly without compiling them into standard JavaScript, which browsers can understand. GitHub Pages serves static files and does not compile JSX to JavaScript. Here's how you can resolve this issue:

Build Your Project

Your React project must be compiled into plain JavaScript before it can be deployed. If you're using Create React App, you can build your project using the following command

npm run build

answered Dec 27, 2023 at 8:41

Nuwan wickramarachchi

113 bronze badges

Comments

Hugo · Accepted Answer · 2024-05-22 18:00:34Z

0

I had the same error during debuging. I was running the site with -

npm run dev
and with "Vite"

Vite telling me that the site was avaible at http://127.0.0.1:5500/index.html but in fact wi was avaible at http://localhost:5174/ has stated by npm run dev.

Notice that the Port is not the same.

Hope that could help someone else.

answered May 22, 2024 at 18:00

Hugo

2,1853 gold badges29 silver badges40 bronze badges

Comments

BelloDev · Accepted Answer · 2022-10-25 15:54:03Z

-1

My friend, if you are using react, you MUST open your console and write "npm run dev"

NOTE: That command will vary deppending on your current instalation of react you can check what is your current starting command by reviewing your package.json file. This is my example, since I'm using vite I must write npm run dev

If you try to open your html with live server like a regular HTML file, you browser will display that error.

Good look my brother.

answered Oct 25, 2022 at 15:54

BelloDev

194 bronze badges

Collectives™ on Stack Overflow

Github Pages. Link empty and Error: Failed to load module script

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related