React/redux app renders blank screen on Safari

I found the issue. The main reason why it failed was 'fetch' function...which is not available in Safari. I'm not sure why it wouldn't print anything, but I suspect, because 'fetch' was called inside try/catch.


I had a similar issue. my list items would get rendered but not painted. so I could see them in dev tools, but they were all white/transparent. I tried adding a transform: translateZ(0) to the list items, and it fixed the issue.


If you have a blank screen on one device but not another, see https://stackoverflow.com/a/61215326/470749

Also, this could happen if your code uses fetch somewhere, and your browser doesn't support it.

Check for browser and OS support: https://caniuse.com/#search=fetch

The official Redux docs say:

We use fetch API in the examples. It is a new API for making network requests that replaces XMLHttpRequest for most common needs. Because most browsers don't yet support it natively, we suggest that you use cross-fetch library:

// Do this in every file where you use `fetch` 
import fetch from 'cross-fetch' 

Internally, it uses whatwg-fetch polyfill on the client, and node-fetch on the server, so you won't need to change API calls if you change your app to be universal.

Be aware that any fetch polyfill assumes a Promise polyfill is already present. The easiest way to ensure you have a Promise polyfill is to enable Babel's ES6 polyfill in your entry point before any other code runs:

// Do this once before any other code in your app 
import 'babel-polyfill'