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

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. — Shane Cavaliere, May 09 '16 at 13:02
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 — Michal Holub, May 09 '16 at 13:16
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? — Shane Cavaliere, May 09 '16 at 13:31
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? — Michal Holub, May 09 '16 at 13:56
Could it be problem of webpack? Maybe it'd help if I showed the build config for webpack — Michal Holub, May 09 '16 at 14:16

score 5 · Accepted Answer · answered Jun 16 '16 at 22:34

5

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.

answered Jun 16 '16 at 22:34

Michal Holub

730
1
7
21

Can you please elaborate as to how you solved it? – abhinavkulkarni Sep 17 '21 at 16:42
Long time ago, but I guess some fetch polyfill. – Michal Holub Sep 22 '21 at 08:06

score 1 · Answer 2 · answered Feb 22 '18 at 16:09

1

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.

answered Feb 22 '18 at 16:09

Reyraa

4,174
2
28
54

Ryan · Answer 3 · 2020-04-14T19:09:51.967

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'

score 1 · Answer 4 · answered Apr 30 '20 at 14:38

1

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

answered Apr 30 '20 at 14:38

Lucas David

102
9

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. – Ezrqn Kemboi Oct 12 '20 at 13:32
@Lucas David this was really helpful this is exactly my case. thanks a lot... – Richardson Mar 04 '23 at 23:46

score 0 · Answer 5 · answered Sep 13 '16 at 16:56

0

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/

answered Sep 13 '16 at 16:56

Guillaume Cisco

2,859
24
25

score 0 · Answer 6 · answered Oct 12 '20 at 13:31

0

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.

answered Oct 12 '20 at 13:31

Ezrqn Kemboi

897
1
12
19

React/redux app renders blank screen on Safari

6 Answers6

The official Redux docs say:

Linked