React vite.js page shows empty page on deploy

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

Hey @Khmlwugh

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

Hi @coelmay sure thing.

I’ve tried changing it before but none worked.

This is how it currently is set:

Thanks for looking into it.

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

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.

2 Likes