How do I fix React.js iOS blank screen?

Question

All my React.js apps work perfectly in all desktop browsers I have tested (chrome, edge, IE, firefox). However, when I try to open them on my iphone, either chrome or safari, I am presented with a blank screen.

Below is an example of an app that works on desktop but appears blank on iOS.

<html>
  <head>
    <meta charset="utf-8">

    <title>react test</title>

    <script src="js/jquery.min.js"></script>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>

    <script>
      var h = React.createElement;

      $(document).ready(() => {
        ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
      });
    </script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

What is the solution to this?

See also about using `fetch`: https://stackoverflow.com/a/61201183/470749 — Ryan, Apr 14 '20 at 05:59

score 1 · Answer 1 · answered Oct 13 '18 at 17:48

1

I solved this one with a lot of experimentation.

The version of safari on my iphone did not support ES6 arrow functions which I used in my code.

Replacing all arrow functions with function(){} fixed the issue.

answered Oct 13 '18 at 17:48

Daniel Fearn

51
1
3

worth trying to upgrade operating system on the device, then possibly update the web browser itself – David Oct 09 '21 at 00:33

score 0 · Answer 2 · answered Oct 12 '18 at 18:24

0

You should always put your script in the end of the document, like this

<html>
  <head>
    <meta charset="utf-8">

    <title>react test</title>
  </head>
  <body>
    <div id="app"></div>


    <script src="js/jquery.min.js"></script>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>

    <script>
      var h = React.createElement;

      $(document).ready(() => {
        ReactDOM.render(h('h1', null, 'Hello World!'), document.getElementById('app'));
      });
    </script>
  </body>
</html>

answered Oct 12 '18 at 18:24

Tareq El-Masri

2,413
15
23

Thanks for your reply. Can you please explain how that makes a difference? I don't quite understand. – Daniel Fearn Oct 12 '18 at 22:06
Because – Tareq El-Masri Oct 13 '18 at 00:01
That was a general advice, to fix your problem you need to debug the website on your phone, connect your iPhone via USB and from macOS Safari > Develop menu, you will find your iPhone as a target. Or use chrome proxy dev tools, My guess it's related to your network connectivity and you couldn't retrieve the bundle correctly on your phone from your PC – Tareq El-Masri Oct 13 '18 at 00:06

How do I fix React.js iOS blank screen?

2 Answers2