React Webapp stays white on some iOS devices

Question

I'm driving crazy. I have a quite complex React Webapp with ES6 features in production. It's working just fine on every device on every Browser I know. Only problem occurs on an iPhone 7 Plus with iOS 12.1.4 either in Chrome and in Safari: The app just says white. What causes me headache is, that is does work on an current iPad in both browsers. Sadly I don't own an iPhone 7, so I'm unable to look at the dev console.

I thought, that it might be an issue with some ES6 features not working in combination with the rendering engine. So I imported all polyfills I can imagine, but it still does not work.

As I said the App is quite complex, so here are some extracts that might help to find the issue.

package.json

{
  "name": "shortbox-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/plugin-syntax-class-properties": "^7.2.0",
    "@babel/polyfill": "^7.2.5",
    "@material-ui/core": "^3.9.2",
    "@material-ui/icons": "^3.0.2",
    "@material-ui/lab": "^3.0.0-alpha.30",
    "apollo-cache-inmemory": "^1.5.1",
    "apollo-client": "^2.5.1",
    "apollo-link-context": "^1.0.14",
    "apollo-link-http": "^1.5.11",
    "apollo-upload-client": "^10.0.0",
    "dateformat": "^3.0.3",
    "expand-tilde": "^2.0.2",
    "formik": "^1.5.1",
    "formik-material-ui": "0.0.16",
    "graphql": "^14.1.1",
    "graphql-tag": "^2.10.1",
    "hamburgers": "^0.8.1",
    "js-sha256": "^0.9.0",
    "notistack": "^0.4.3",
    "react": "^16.8.3",
    "react-apollo": "^2.5.1",
    "react-autosuggest": "^9.4.3",
    "react-cookie": "^3.0.8",
    "react-dom": "^16.8.3",
    "react-hamburgers": "^1.0.0",
    "react-images": "^0.5.19",
    "react-router-dom": "^4.3.1",
    "react-router-last-location": "^1.1.0",
    "react-router-scroll-4": "^1.0.0-beta.2",
    "require-uncached": "^2.0.0",
    "recompose": "^0.30.0",
    "yup": "^0.26.10"
  },
  "devDependencies": {
    "react-scripts": "^2.1.5",
    "typescript": "^3.3.3333"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

index.html

index.js

import "@babel/polyfill";
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'raf/polyfill';
import React from 'react';
import ReactDOM from 'react-dom';
import ApolloClient from "apollo-client";
import './index.css';
import App from './components/App'
import {ApolloProvider} from "react-apollo";
import CookiesProvider from "react-cookie/cjs/CookiesProvider";
import {Cookies} from 'react-cookie'
import {SnackbarProvider} from 'notistack';
import {InMemoryCache} from 'apollo-cache-inmemory';
import {setContext} from 'apollo-link-context';
import {BrowserRouter} from "react-router-dom";
import {ScrollContext} from 'react-router-scroll-4';
import {LastLocationProvider} from "react-router-last-location";
import Button from "@material-ui/core/Button/Button";
import {createUploadLink} from "apollo-upload-client";

const uploadLink = createUploadLink({
    uri: 'http://localhost:4000'
});

const authLink = setContext((_, {headers}) => {
    let cookies = new Cookies();

    let token;
    let session = cookies.get("session");
    if (session)
        token = cookies.get("session").id + ":" + cookies.get("session").sessionid;

    return {
        headers: {
            ...headers,
            authorization: token ? `${token}` : "",
        }
    }
});

const client = new ApolloClient({
    link: authLink.concat(uploadLink),
    cache: new InMemoryCache()
});

ReactDOM.render(
    
        
            
                
                                          Verbergen
                                      
                                  ]}>
                    
                        
                            
                        
                    
                
            
        
    ,
    document.getElementById('root')
);

These extracts are from my dev environment, so don't wonder about the dev setup. :)

I am building with

REACT_APP_ENV=production npm run build

Any idea, why it does not work on that specific device. I am clueless.

Thanks in advance!

Christian Riese · Accepted Answer

I found it. In case anybody is wondering, window.screen.orientation seems to be undefined on this specific device.

React Webapp stays white on some iOS devices

Answers (1)

Related Questions