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

Support
, ,
1

My first time I deploy to Netlify. It is an existing github repo build on react.

I managed to publish the site:

11:58:44 AM: Starting post processing

11:58:44 AM: Post processing done

11:58:44 AM: Site is live

11:59:21 AM: Finished processing build request in 1m33.997954007s

But when I go to the link ( https://brave-lamarr-54a10a.netlify.app/ ) - it’s just a blank page.

Is there a rookie mistake I did?
Do I need the netlify.toml file and the use ‘build’ as publish directory?

Here’s the repo I’m trying to deploy: https://github.com/jossifelefteriadis/jossifelefteriadis

Here’s a print of my build settings
netlify

2

Adding a netlify.toml file to the root and then change publish directory to build was the issue. Working just fine now!

1 Like
3

great! glad you fixed it. :tada:

4

I have a issue same like this for two days, i don’t know what to do:

netlify
netlify677×660 38.5 KB
![netlify1|590x500]

It just show a blank space like above with some error but it is live.

5

hi there, can you provide a link to the live site please?

6

hi i am also having same problem .showing only blank page .i am using gh-pages branch
I don’t know wat to do pls help

8

Hey,

Do any of the following discussions help?

https://answers.netlify.com/t/blank-white-screen-when-deploying-a-react-app/17778

https://answers.netlify.com/t/blank-page-when-deploying-a-react-project/8134

Failing these, can we get a link to the live site? If you browse to the page and open your browser’s dev tools, is there an error?

10

I think we’ll have to agree to disagree because I can see errors :slight_smile:

React_App
React_App721×150 34.9 KB

My guess is that we’re encountering something similar to this:

Make sure your assets are in the correct publish directory after the build :smile:

11

how to clear this error
my asserts are in build folder

12

If you browse to the site, https://affectionate-nobel-72addf.netlify.app, there’s still errors :slight_smile:

Did not parse stylesheet at 'https://affectionate-nobel-72addf.netlify.app/Netart/static/css/main.9f9122cc.chunk.css' because non CSS MIME types are not allowed in strict mode.

You’ll want to ensure that you provide a suitable MIME type, i.e. text/css, like:

<link href='www.example.com/whatever.css' rel='stylesheet' type='text/css'>

And there are a couple of other errors being shown too. They’re syntax errors so you’ll need to find the typos. :slight_smile:

13

I’m having the same issue
here is the link to the site :

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

P.S: netlify.toml file content is :

[build]
  command = "npm run build"
  publish="/build"
  base = ""
14

@ismailalabou Welcome to the Netlify community.

Have you tried fixing the coding errors on your page to see if that helps?

15

@gregraven
yes, actually the site is live and working perfectly fine in github pages.
the build error rise when adding netlify.toml file,
i added the netlify.toml file to fix blanc screen but i ended up with other issues cause i dont know what to write in the netlify.toml file.

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