React App returns a blank page on live site. Works perfectly on localhost

Support
1

Hello!

I have deployed a React project to Netlify. The project build works perfectly on my localhost and no errors pop up, however, after deploying to Netlify all I get is a blank screen. [Repo link] [Here is the live site]

Deploy log:

8:22:24 AM: Creating deploy upload records
8:22:25 AM: Starting post processing
8:22:25 AM: Post processing - HTML
8:22:25 AM: Post processing - header rules
8:22:25 AM: Post processing - redirect rules
8:22:25 AM: Post processing done
8:22:29 AM: Site is live :sparkles:

Build Settings:

Build Settings
Build Settings910×435 13.3 KB

Any help will be much appreciated

  • Dirk G
2

Hey @DirkG

If you look at the page you’ll see

<script type="module" crossorigin="" src="/prueba-react-I/assets/index.494f3a27.js"></script>

Notice the src path is prefixed with /prueba-react-I/ when the app is deployed at the domain root (/.)

This is due to the base setting in the vite.config.js

  base: "/prueba-react-I/",

Remove the base, or set it to / and try deploying again.

1 Like
3

Thanks @coelmay that DID indeed do something, at least now I see the background image and the favicon, still no content beyond that though :frowning:

4

I cloned your repository and built it locally. After cloning and installing dependencies, I ran npm run build then serve dist (run npx serve dist if you don’t have serve installed globally). When I view the built site, I also see no content, so this indicates an issue with your app, not the way Netlify builds it.

5

I guessed as much but it does work fine when I run it locally. I just don’t know where else to look or what to change, I don’t see how I can identify the issue. Any pointers would be very helpful.

6

When I run npm run dev I still don’t see any content. Same when I run npm run build && npm run preview.

However I see no errors, nothing to provide any indication as to the source of the issue.

1 Like
7

I have made some changes and at least the Home page does display now. It had something to do with the base directory in vite.config.js. However, now the next problem I’m facing is that whenever I click on one of the links I have on my Navbar, I get a 404 page. I’m routing with react-router. Any idea what this could be? I have added a netlify.toml file to my root directory with the following configuration:

[[redirects]]
from = “/*”
to = “/index.html”
status = 200

However this has not helped.

[https://astounding-entremet-db265a.netlify.app/Here is the new deployed site]

8

Not quite. The links in your navigation are using standard HTML <a> elements e.g.

<a
  href="/musica"
  className="block py-2 pr-4 pl-3 hover:text-white active:text-white"
  aria-current="page"
>
  Escucho Música 🎼
</a>

instead of the React Router <Link> component e.g.

<Link to="/">Home</Link>
2 Likes
9

That was it! Silly me, thank you so much for that. I didn’t really pay attention to that because it was working locally so it didn’t cross my mind.

Thanks again!

1 Like