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

Hi all,

I have a similar problem…
I just uploaded and deployed my project to netlify. But when navigating to the page I see a white screen.
Inspecting the page I don’t see any errors. But the html code is not the same as the one generated locally
It is a react project!

Link : https://boring-elion-c6279f.netlify.app/

My package.json:

Thanks in advance,
Xabi

Hi, @jaure96. It looks like you both renamed the site and got it working. Would you be willing to share the solution you found here?

Hi Luke,

I faced the same issue but was able to solve it with the help of this link instructions : How to deploy a React app with Netlify and set up continuous deployment via Github | by Gene Campbell III | Level Up Coding

Regards,
Pallavi

1 Like

Hi Luke,
I was using react-redux and react-router in my proyect.

I manage to solve the problem by adding two things:

  • Add a _redirect file in my /public folder, with this content inside:
    /* /index.html 200

  • Add a netlify.tom file with this configuration:
    [build]

    command = "npm run build"
    publish="build/"
    base = "front/"
    

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

  • Update my build setting:
    image
    I am duplicating the information in the file netlify.tom

I hope this can help someone else,
Xabi :yum:

I am also facing the same problem of a blank screen here’s the netlify url to my site

Hey there, @amantulsyan35 :wave:

Can you give this thread a read and follow the suggestion? Let us know if this solves your issue.

I have the same problem. I created a new application and running perfectly in my local but being blank in netlify.

I followed the instructions (creating a _redirect file in public folder as well as netlify.toml file in root, but receiving blank. I noticed, if I changed the title in index.html, i can see the new title but not being redirected.
Please, help.

@Luis_Adrian Have you seen this error message on your site?

Error: The '@emotion/core' package has been renamed to '@emotion/react'. Please import it like this 'import { jsx } from '@emotion/react'.

I am facing the same problem, can you tell me what i am doing wrong ?

git repo – GitHub - tentamdin/tentamdin.github.io
netlify site – https://jolly-hamilton-3bf513.netlify.app/

@tentamdin What happens when you fix the errors in your code?

That’s the problem, I don’t understand the error. Can you let me know that error saying ?

Hey there, @tentamdin :wave:

We have some resources available for syntax error: unexpected token. Check out this thread and the links that are included: [Support Guide] Why do I see “Uncaught SyntaxError: Unexpected token <” errors? How can I use chunking or versioning for my assets at Netlify?

Let us know how this goes!

Thanks a lot ! removing the homepage variable from package.json worked for me

1 Like

hey could you do this for my github? https://github.com/LilCrispyVal/valentinapugliese I only know how to do the coding coding not the github coding, too complex for me, thank you!

Hey there, @Valentina :wave:

Glad you found this thread! Could you elaborate on what you mean by “could you do this for my github”? Did you encounter errors after following the suggestions in the thread?

Thank you! :slight_smile:

Hey, I’m currently experiencing a similar problem with my webapp pieoffice.netlify.app (source in github), but with some strange differences. It might be important to note that a couple of weeks ago, this problem did not ocurred, but reverting to a previous build did not solved the issue.

As with the others, the build and deploy on netlify works flawlessly. The website loads as it should on Firefox. But on other browsers it loads as a blank page if the OS is Windows (in Linux/Android it loads in every browser).

I tried every fix presented here but to no avail. After inspecting the site I realized that whereas on Firefox (and all Linux browsers) the file tree is perfect, there are many missing components on Edge and Chrome (Windows).
The logs say that npm generates the proper .js chunks:

11:00:25 AM: File sizes after gzip:
11:00:25 AM:   115.04 KB  build/static/js/2.afe21bd2.chunk.js
11:00:25 AM:   13.03 KB   build/static/js/main.49ca8f22.chunk.js
11:00:25 AM:   1.63 KB    build/static/js/3.58cd266d.chunk.js
11:00:25 AM:   1.17 KB    build/static/js/runtime-main.e12cc515.js
11:00:25 AM:   540 B      build/static/css/main.eb01e840.chunk.css

Firefox (and other Linux Browsers)

- pieoffice.netlify.app
    |- (index)
    |- src
    |- static
        |- css
        |- js
        |    |- 2.afe21bd2.chunk.js
        |    |- App.js
        |    |- index.js
        |    |- main.49ca8f22.chunk.js
        |    |- reportWebVitals.js
        |- node_modules 

Chrome and Edge (Windows)

- pieoffice.netlify.app
    |- (index)
    |- src
    |- static
        |- css
        |- js
        |   |- 2.afe21bd2.chunk.js
        |- node_modules 

Furthermore, the debugger of Edge and Chrome throw a Uncaught RangeError: Maximum call stack size exceeded, which is unhelpful.

Thanks in advance.

UPDATE

For whatever reason, excluding three rules in src/converters/luwian fixed the issue (with the cost of losing the coverage of the writing system). Seemingly the script was too long for some browsers to load properly. It is weird that some browsers did indeed accepted the longer script.

im having the same issue but i have different error

here is my site: https://elegant-roentgen-739703.netlify.app/
it shows these errors and i dont know what they are:

Hi @AlbertoCastroF,

Your paths are incorrect:

image

Probably you’re using a wrong value as homepage in your package.json?

this is the value of my homepage: https://AlbertoCastroF.github .io/netflix-clone-react i uploaded my project to github but a methos: “POST” is not working so im trying netlify to see if it works.

Try setting the homepage value to /, to see if it helps.

1 Like