0

I've built a React.js app that works perfectly on desktop and Android, but on iOs it just shows a blank white screen. I've been reading in different places it has to do with the homepage in my package.json, but I can't understand what the right configuration is. I've bee trying many different variations, but it's still white.

some people say it needs to be "homepage":"." others say it should be "homepage":"https://yoursite.com/relativeurl". I'm not even sure with the second, what goes instead of relative url? Some show it with https:// some say make sure it starts with http://.

Been playing around with this for 3 hours now but still just a blank white screen on my iPad but perfectly fine on my desktop.

EDIT: I've added the headers to my firebase.json, making my final file look as follow:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

In my main index.js body tag, I configure firebase as follows:

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.14.1/firebase-analytics.js"></script>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="/__/firebase/7.14.1/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="/__/firebase/7.14.1/firebase-analytics.js"></script>

  <!-- Initialize Firebase -->
  <script src="/__/firebase/init.js"></script>

  <div id="root"></div>
Tsabary
  • 3,119
  • 2
  • 24
  • 66
  • `homepage` is really only necessary for just hosting solutions such as [GitHub Pages](https://create-react-app.dev/docs/deployment/#step-1-add-homepage-to-packagejson). Are you sure no errors are occurring when loaded in iOS (by iOS do you mean Safari)? Also how is this hosted/served? A standard create-react-app application is built into HTML/CSS/JS, there is no `package.json` in the `/build` folder that would be deployed. – Alexander Staroselsky Apr 22 '20 at 15:40
  • @AlexanderStaroselsky ok true, I guess me editing it makes no difference then? I'm confused a to why people would point to that as the solution. My app is hosted on Firebase hosting. And yes both Chrome and Safari give me a blank white page. How can I check for other errors, if I don't have a Mac? Apple really doesn't make it easy on developers. https://stackoverflow.com/questions/56054235/how-to-fix-the-white-screen-after-build-with-create-react-app/56055153#56055153 – Tsabary Apr 22 '20 at 15:55
  • In that post, they were trying to load the entire application under a subpath `/React`. Are you trying to load your react application under a subpath? – Alexander Staroselsky Apr 22 '20 at 15:58
  • @AlexanderStaroselsky no,just a normal create-react-app with one index.html – Tsabary Apr 22 '20 at 16:03
  • Okay, so possible it's an error occurring or something like route not being matched. – Alexander Staroselsky Apr 22 '20 at 16:04
  • @AlexanderStaroselsky wouldn't I be experiencing issues on my desktop and Andriod as well if that was the case? – Tsabary Apr 22 '20 at 16:05
  • Maybe, maybe not. For example, some specific date time strings are handled differently in safari. There could be a package/dependency in your application that is causing an error in Safari. It's hard to say. What is the URL to the site? – Alexander Staroselsky Apr 22 '20 at 16:08
  • https://salon.express – Tsabary Apr 22 '20 at 16:08
  • I was able to load on safari for mac and safari for iOS without error. Are you using service workers? Did you configure firebase hosting to not cache the service worker? – Alexander Staroselsky Apr 22 '20 at 16:14
  • @AlexanderStaroselsky only been doing React & JS for like 5 months. Never heard of service workers, so I guess I'm not using them? Would using them be the issue, or no using them? – Tsabary Apr 22 '20 at 16:16
  • @AlexanderStaroselsky ok I've read a bit. I think I might be using Service Workers? I have listeners that listen to certain documents in my DB. I've made sure that I unregistered them all when unmounting. If I've missed umounting at some point, you think that it might be the issue? – Tsabary Apr 22 '20 at 16:21
  • Okay, well maybe share how you instantiate firebase in your application. There are warnings that you are using a development build which means you may have included it incorrectly. That being said CRA has service workers that you can enable, if you have, firebase hosting need to be configured in a way to avoid caching the resulting service work file: https://create-react-app.dev/docs/deployment#firebase – Alexander Staroselsky Apr 22 '20 at 16:23
  • @AlexanderStaroselsky I've added the headers line from the link you've added but it didn't help. I've updated my question as well with the rest of the configuration for firebase – Tsabary Apr 22 '20 at 16:39
  • IF you had the service worker enabled, and you deployed it without that cache control configuration, it's already cached. You would need to review the firebase hosting documentation to find a way to clear cache. That being said, this is only if you have CRA enable the service worker. This could still be another issue. – Alexander Staroselsky Apr 22 '20 at 16:47
  • @AlexanderStaroselsky thank you Alexander. I will try to check that and hopefully that'll solve my problem – Tsabary Apr 22 '20 at 16:49

0 Answers0