Vite React App white screen on Vercel deploy

I am getting a white screen on deployment. A local Vite build and preview works fine and so does my Gitlab pages. I am seeing a js and css file 404 in the network tab (e.g. https://commercial-cleaning-kappa.vercel.app/commercial-cleaning/assets/index-CsuQfIM6.css) so I am sure something is slightly off with the build path or base. Any help would be appreciated. Thanks.

Gitlab code
Vercel Link

Hi, and welcome, @frankwoodling!

I wonder if you change your base to:

base: '/',

if that works?

I have a theory that by setting base: '/', you’re ensuring that all asset URLs are generated relative to the root path. This is typically what you want when deploying to Vercel unless your app is meant to be served from a subdirectory.

Can you give that a go?

Thanks pawlean. I updated that and those js and css file are now fetched properly but I am still seeing a white screen. Any ideas? I get a white screen on local build/preview with that base as well.

Thanks for sharing the repo! I see you already set base: '/' in vite.config.ts like @pawlean suggested.

You’ll also need to set basename: RoutesEnum.Home in src/routes/AppRoutes.routes.tsx to make it display the right page as the root path.

Please give that a try and let me know whether or not it works for you. :pray:

That is what it was. Working great now. Thank you so much to both of you. I appreciate your time.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.