React vite.js page shows empty page on deploy

Support
,
1

Hi all,

I’ve created a react page using vite and it works and runs locally but when deployed to netlify I encounter this error on the console:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

My site name: https://gabrielflores.netlify.app/

My github repo: GitHub - Khmlwugh/Gabriel-s-Page: This is my personal webpage created using React.

I’ve tried solutions from similar posts like this one: React app launches with blank page , but it didn’t work.

Thanks in advance to whoever tries to help.

Gabriel

2

Hey @Khmlwugh

Can you share a screenshot of the build settings you are using? I suspect they are not correct.

3

Hi @coelmay sure thing.

I’ve tried changing it before but none worked.

This is how it currently is set:

image
image917×432 23.3 KB

Thanks for looking into it.

4

Thanks @Khmlwugh

As you are building a Vite/React app, you need to provide a build command, and a publish directory otherwise Netlify will deploy the files in the repository as is. See

In this instance the build command to use is npm run build, and the publish directory is dist which is the vite default.

Pushing the node_modules directory is not required as Netlify (and likely most platforms) will install the required modules when building and cache them. There are also a couple of modules used that are not in the package.json. These will cause the build to fail until you add them.

1 Like
5

I finally got the page to work.

However, instead of using npm run build, I used vite build as the build command. I did update the publish directory to dist.

The main thing I hadn’t thought of was checking the modules on the package.json.

Thanks a lot for the help as I’ve been stuck on this issue for a good week.

3 Likes
6

Thank you so much! I was stuck in with this error for so long.

7

Ahh @Veenakrishna :wave:t6: thanks so much for sharing that. I’m glad you got unstuck. Please let us know if you have any other questions I also responded on your other post. (:

1 Like
8

Sure will do. :slight_smile: Thanks!

9

Hi Sam, I have the same issue. But this solutions didnt work for me. can you look into it?

this is the error:
main.jsx:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

link: https://resonant-cat-43f175.netlify.app/

10

Hi, I am seeing that your site is not available. Please refer to this support guide and see if this helps first. If this is not working please share your build log and build settings.