Site is live, but sill blank screen (react app)

Hi @Marakanz,

There’s something wrong with your JavaScript that you might need to check:

but I wasn’t the one wrote the code it generated after I deployed the website i.e after the static files were created

Yes, but it’s because of the code you’ve written or because of one of the libraries you’ve used. Netlify doesn’t modify your code, it just builds your website like when you run npm run build.

Hi,
I have the same issue, my react-app shows a blank screen after successful build. Index.html is in the public folder. Publish directory: build.
It works and builds fine on localhost. I downloaded the deploy file, it seems fine. Can you help, what could I get wrong?
https://mini-inventory.netlify.app

Hey @vhelfrih

I see the following errors in the console

Did you set environment variables with the API key?

Note: If this key needs to remain private, then you are best advised to use a function to connect to the API endpoint otherwise the key is visible in the frontend code.

Hey,
Thanks for your quick response! I was in a hurry and forgot to set them right.
Now it’s working fine.

Hi,
I have the same issue, my react-app shows a blank screen suddenly after I just change a position of a button…But it still works and builds fine on localhost. Can you help, what could I get wrong?

Updated:
I found that if I visit to Kidft Store , which just add ‘/shop’ for the link below then it can work, and I click the icon to back to the homepage, it can also work, but when I refresh in the homepage, it becomes blank page again. The console show something like this:

image

But I not understand what is the problem… Because it works fine in local…

My website: https://kidft-store.netlify.app/

Thanks for helping me!!

Hey @Serene

I don’t see the same issues you describe with your site. Navigation works fine, and refreshing the pages does not break them.

Have you made changes or are you still seeing the same issues?

1 Like

Hi, @coelmay Thanks for the fast reply.
I haven’t made changes to the website and when I accessed the website, it still has the problem like the image below:

It can work if I add ‘/shop’ to the URL to navigate to other page and also can refresh the website. The problem is when I first access to this website, it is blank as the image shown.

This is what I see when I first access the site, and after navigating around it, clicking the back button, clicking refresh etc. @Serene

If you try a different browser do you see the same issue?

Ohh… I tried on a different browser and did not see the same issue already :joy: @coelmay
Actually, why does this problem occur? I have no idea about that haha

Quite possibly because the browser you always use has a local cache. Plus the site uses a Service Worker @Serene. See

1 Like

Hello, I am having the same issue, my site comes out blank when I deploy on netlify.
My site: https://pubyana-resume.netlify.app/
it works fine locally but throws these errors when I check dev tools on chrome.


Please how do I resolve this?

Hey @shagariboy

The issue here is the %PUBLIC_URL% isn’t being replaced with the appropriate value during build. Are you able to share the repository you are deploying from?

Sure.

Thanks @shagariboy, everything looks ok. What are your build settings?

i am not sure what you mean but i use the Netlify CLI to build:
Screen Shot 2022-04-21 at 09.41.53

Ah, ok.

I don’t see a netlify.toml file in the repository. Do you have one? Can you tell me what directory you are deploying?

I don’t think i have that file. i am currently deploying from the public folder.

The public directory is not the directory you need to deploy. You need to deploy the build directory as mentioned here and here.

You need a _redirects file in the public directory as outlined in the first link above with

/*  /index.html  200

Next, create a netlify.toml file in the root of the project with the following (default) values

[build]
  # command Netlify CLI will run to build
  command = "npm run build" 
  # Directory it will publish
  publish = "build"

There is a lot more you could add see documentation.

To deploy, use

netlify deploy --build

which instructs Netlify CLI to build the site first before deploying it. Add the --prod flag if you want it to go straight to production.

https://cli.netlify.com/