React Application Builds & Deploys into a Blank Page for Some Devices

Hello, my team recently deployed our PWA (programmed with ReactJS and Firebase) to Netlify, and we have been having issues with the deploy. The website works when hosted locally, but when deployed through Netlify it does not load on several devices (it loads on some users’ iPhones in Chrome and on some laptops on Safari, but it’s not loading on other laptops (in Safari, Chrome, or Firefox) or on some iPhones/Androids). We deployed previously (a couple weeks ago) and had everything functional (except one page that was blank). While we have made changes since that mostly successful deploy, we don’t think we’ve made any drastic enough changes to cause this sudden break. We suspect the problem has something to do with our build or that we are missing something in our files. For devices that display a blank screen, we are still able to see our custom scrollbar and the logo and title of our app in the tab on the computer.

We have tried the following things:

  • Looking at the downloaded zip file from published deployment to evaluate our index.html file
  • Fixing as many warnings/errors in the console as we knew how to
  • Adding homepage": ".", to our package.json file
  • Building with other hosting sites (Firebase and Github Pages) but they both also deployed with a blank white screen
  • Made sure we were deploying correctly by deploying other PWAs which deployed correctly on Netlify and Firebase
  • Reverting back to an earlier version of our PWA that originally mostly worked when deployed on Netlify. It no longer worked (wouldn’t load on some devices that it had previously worked on).
  • Reading all the related questions that we can find on here and implementing the suggested fixes

We appreciate any help you could provide. Thank you!

Note: we are using CI=npm run build instead of npm run build because the latter resulted in errors.

Here is the link to our github repo: https://github.com/2020summerstartup/sustainability.
Here is the link to our netlify app: https://sustainability-competition.netlify.app/.

Here are some screenshots from our deployment log and our index.html file:
https://docs.google.com/document/d/1zEdx0h-fuEKokMaoPtnGUxvzFwUaQNXaD0IPlvtISm4/edit?usp=sharing

Update: While we haven’t fixed the issue yet, I think we know what the overall cause was. We are using local storage, and the app was trying to load every page when it first loaded. That involved reading a bunch of information from local storage, including some values that were not yet initialized. So it crashed and gave us a blank screen.

1 Like