Vite React Website showing blank page after deployment

Please guys I have been using Netlify for years now and never had this problem.

My Vite react site deployment doesn’t do the post-processing stage, it skips the post-processing.
Then it says the site is live. But when I go to the page, I get a blank page.

I have been debugging for days now

here is the link to the deploy log: https://app.netlify.com/sites/peppy-hotteok-700c2e/deploys/64f9b6da75867c0008dd16e2

here is the link to the site: https://peppy-hotteok-700c2e.netlify.app/

@Wayskid Check how you have your build configured, as you’re deploying source files.

See:

And:

https://peppy-hotteok-700c2e.netlify.app/src/main.jsx

Thanks Nath

This is how my index.html file looks like. Please what should I change it to?

please remember I’m using vite, not create-react-app. Vite has its index.html file in the root folder

@Wayskid I’m not going to provide you specific instructions, as I have little to no visibility for your project.

You should familiarize yourself with what you’re working with, so in this case both Vite and Netlify.

Make sure you know how to execute your build, test it locally, make sure everything is ok, and configure Netlify to do the same.

The Vite Building for Production documentation is here:

The Netlify Build configuration documentation is here:

The thing is, I have been using Vite and Netlify together for a while now. I already have 3 live websites that were built with Vite and still work perfectly.

I have never faced this problem before and I didn’t do anything different. So I am really perplexed. I have read those docs and followed their instructions which I have always done before.

Its also rather annoying that Netlify cannot even log what the issue is.

@Wayskid Have you:

  • Run your build command locally and confirmed the output?
  • Confirmed the same Build command is set on Netlify?
  • Confirmed that the correct Publish directory is set on Netlify?

Netlify follows the instructions as provided, if it were given source files and told to “build nothing and deploy them”, then it would “build nothing and deploy them” and there wouldn’t be any errors to log.

There is an error on the console

Here is the error: “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.”

@Wayskid Yes there is, but that’s not new information.

Refer to my original screenshot where I show that your currently deployed site has a script element with a src attribute pointing to a .jsx file with a type="text/babel".

The file has not been built, it’s a source file.

That error occurs because the site is trying to load that .jsx file as if it were a .js file and Netlify serves the .jsx file with a Content-Type of application/octet-stream.

Okay, I see now. So please what should I do about this? Because if I change .jsx to .js, vite will not build.

@Wayskid The answer for “what to do” is the same as already provided, have you:

  • Run your build command locally and confirmed the output?
  • Confirmed the same Build command is set on Netlify?
  • Confirmed that the correct Publish directory is set on Netlify?
1 Like

Oh my God, it worked!
You have literally just saved my life. I’ve been on this for days.

So I did the build locally, then deleted the website on Netlify to start the deployment from scratch.

I put the publish directory as /frontend/dist
And it worked! :grinning:

Thank you so much Nathan.

My other question is, I didn’t use to do this before and things just worked. Please what changed?
Cause now I need to know if I need to start doing this for other sites I will build going forward.

To my knowledge nothing has changed.

It has always been the case that Netlify deploys whatever is set as the Publish directory.

If you still have the previous projects that “just worked” you could compare their details against your new one.

Well, you’re right about that. There is actually a difference. Those other projects were built with typescript. With typescript, I had to build first.

1 Like