javascript - Github Pages. Link empty and Error: Failed to load module script - Stack Overflow

admin管理员组

文章数量:1429392

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?

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?

• javascript
• reactjs
• github
• github-pages

Share Improve this question Follow asked Sep 16, 2022 at 19:43 Noe CaseresNoe Caseres 2111 gold badge11 silver badge22 bronze badges 3

• 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 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 Commented Sep 20, 2022 at 18:39
• You can't update changes? Do you have a specific error? – g0rb Commented Sep 20, 2022 at 18:54

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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 mand, 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.

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.

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

Build Your Project

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

npm run build

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.

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

NOTE: That mand will vary deppending on your current instalation of react you can check what is your current starting mand 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.

本文标签： javascriptGithub Pages Link empty and Error Failed to load module scriptStack Overflow