React/redux app renders blank screen on Safari

Question

I built an app in React/redux that works in every browser I tried, BUT Safari on MacOS and any browser on iPhone. I get no error, no console message, nothing that would give me some idea. It only renders tag in Safari and the screen is blank.

http://podcast.exploration.io

Do you have any idea how could I trace this issue?

Thanks

Stempson

Have you tried doing console.logs all over the place, to see if you can spot a point of failure in Safari? That would be a good first step. – Vin

Yeah, I did. The action is logged in the action reducer. Then there is redux saga that should pick up that action and do some async job...that never gets called though. I was wondering how would I go about figuring out what happened in such cases – Stempson

If your reducers are receiving the actions, but redux-saga is not, that makes me guess that there's an issue with your middleware being applied. Are you using any store enhancers that may not work with Safari, like the Chrome DevTools Extension or something? – Vin

This is how I create the store: const store = createStore(reducer, applyMiddleware(sagaMiddleware)) besides that I don't do any other store enhancements. To keep the store state, I'm using immutable. Would sharing a source with you help? – Stempson

Could it be problem of webpack? Maybe it'd help if I showed the build config for webpack – Stempson

did you find any solution ? same thing happening with me – Bowls

Answer 1

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.

Stempson

Can you please elaborate as to how you solved it? – Indoctrinate

Long time ago, but I guess some fetch polyfill. – Stempson

Answer 2

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.

Ninon

Answer 3

If you have a blank screen on one device but not another, see https://mcmap.net/q/1019626/-why-does-my-react-redux-typescript-app-work-everywhere-except-iphone-6-ios-12-0-1-where-it-is-a-blank-white-screen

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'

Leonardoleoncavallo

Answer 4

Had exactly the same problem. It was due to the use of lookbehind in a regular expression, which does not seem to be supported by Safari. See this thread

Axes

I think it is caused by one of the Javascript dependencies that needs an update. For more detail, use developer tools to check chunk files to see which dependency is causing the issue. – Indivisible

@Lucas David this was really helpful this is exactly my case. thanks a lot... – Annabel

Answer 5

The issue was fetch for me too. As I'musing webpack I add to correctly import i following this article: http://mts.io/2015/04/08/webpack-shims-polyfills/

Anneliese

Answer 6

I had the same issue, and I come to realize that I had to update the version of antd and @ant-design/charts and it worked well.

Indivisible