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

Support
, ,
16

Hi, @ismailalabou. You site build is creating a reference to a subdirectory in your javascript URLs.

For example, here is a script tag from the index.html file:

<script src="/developerFolio/static/js/2.eabd148f.chunk.js"></script>

This becomes the following URL for this site:

https://frosty-spence-f63eff.netlify.app/developerFolio/static/js/2.eabd148f.chunk.js

However, the subdirectory developerFolio isn’t part of the deployed site. The correct URL is actually this:

https://frosty-spence-f63eff.netlify.app/static/js/2.eabd148f.chunk.js

So the script tag needs to be this:

<script src="/static/js/2.eabd148f.chunk.js"></script>

You will need to discover why that subdirectory is being included in the script tag to resolve this. If there are other questions or concerns, please let us know.

1 Like
17

hello @luke thanks for the feedback, I understand what you’re saying, now am aware of the source of the problem. am gonna try to solve it in the mean time & I will keep you posted if anything changes :slight_smile:

18

am so confused because the structure seems fine to me (developerFolio directory below):
image

do you think “redirects rule” can solve my problem ?

19

hi there, quick question: is (index) a file called index.html?

20

hello @perry, yes index.html

21

Hi, @ismailalabou. I see you have moved index.html outside of the developerFolio directory now and so this URL loads the index.html now:

https://frosty-spence-f63eff.netlify.app/

However, if you look at your browser’s dev tools (for example using chrome), you will see 404s for these two URLs:

https://frosty-spence-f63eff.netlify.app/developerFolio/static/js/2.eabd148f.chunk.js
https://frosty-spence-f63eff.netlify.app/developerFolio/static/js/main.8a1aa5c0.chunk.js

This is because those files are also no longer redeployed under developerFolio. The correct URLs are the ones below:

https://frosty-spence-f63eff.netlify.app/static/js/2.eabd148f.chunk.js
https://frosty-spence-f63eff.netlify.app/static/js/main.8a1aa5c0.chunk.js

The wrong URLs are being used being used because it is incorrect in your HTML. The two script tags look like this:

  • <script src="/developerFolio/static/js/2.eabd148f.chunk.js"></script>
  • <script src="/developerFolio/static/js/main.8a1aa5c0.chunk.js"></script>

However, the correct tags should (probably) be this:

  • <script src="/static/js/2.eabd148f.chunk.js"></script>
  • <script src="/static/js/main.8a1aa5c0.chunk.js"></script>

Please let us know there are other questions.

2 Likes
22

at homepage variable in the package.json file,the path was pointing to “/devoloperFolio”, I clear it.
it’s working now :smiley:

1 Like
23

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:

image
image876×954 40.1 KB

Thanks in advance,
Xabi

24

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?

26

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
27

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:

29

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

30

Hey there, @amantulsyan35 :wave:

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

31

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.

32

@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'.

33

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/

34

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

Screen Shot 2021-06-17 at 10.16.32 AM
Screen Shot 2021-06-17 at 10.16.32 AM2642×180 60.7 KB

35

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

36

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!

37

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

1 Like