Home
Support Forums

Error when deploying react app to netlify, it renders a blank page

PLEASE help us help you by writing a good post!

  • we need to know your netlify site name. Example: gifted-antelope-58b104.netlify.app
    https://exitor.xyz/ Hosted on Netlify
  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot
    No Build problems
    The better the post - the faster the answer.
    I have successfully deployed a React App on Netlify, here is the github repo: https://github.com/Malibia/Exitor

However, when I click to view the site on the browser, it does not render, I only see a Blank Page

I have gone ahead and tried debugging with the Chrome Console and this is the error I find:

Manifest: Line: 1, column: 5, Unexpected data after root element.
It seems that there is an error with the manifest.json file, but I can’t seem to find where and so I do not know what to do, I don’t see any error on my part as I go through the code.

Going through several web pages it shows that it is commonly a problem that occurs due to server errors trying to render React frontends, so I am suspecting it is Netlify servers that are having a glitch when trying to render my page.

I really need some help, because this problem has been there for 2 weeks now, please feel free to check the code on my github and also see the domain URL to verify.

Here is how my manifest.json looks like:

  "short_name": "Exitor",
  "name": "Business Exiting Platform",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "1.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }	    
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#4ec5ce",
  "background_color": "#ffffff"
}

and my index.html file looks like this:

<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#4ec5ce" />
    <meta name="description" content="A Business Exiting Platform" />
    <link rel="apple-touch-icon" href="apple-touch-icon.png" />
    <link rel="android-chrome-192x192" href="android-chrome-192x192.png" />
    <link rel="android-chrome-512x512" href="android-chrome-512x512.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" crossorigin="use-credentials" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Exitor - Business Exiting Platform</title>
</head>

<body class="has-animations">
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root" class="body-wrap"></div>
</body>

</html>```

All the image files and favicons I have referenced are in the public/ folder in the page which is hosted here:

```https://github.com/Malibia/Exitor/tree/main/public```

I don’t see the error you’re seeing, but I’m assuming the blank page is because you’re publishing public folder instead of build.

1 Like

Hello, thanks for the help but it is not the case. The app is a react app, not a node.js application, so it builds from the public folder. @hrishikesh

Hello @hrishikesh , just redployed and you were right!!! Haha, thanks so much!!! The app rendered and I learnt something new from you, thank you so much, hope you have a great day!!! Really happy