Я схожу с ума.У меня довольно сложный React Webapp с функциями ES6 в производстве.Он отлично работает на каждом устройстве в любом браузере, который я знаю.Единственная проблема возникает на iPhone 7 Plus с iOS 12.1.4, либо в Chrome, либо в Safari: приложение просто говорит «белый».Что вызывает у меня головную боль, так это то, что работает на текущем iPad в обоих браузерах.К сожалению, у меня нет iPhone 7, поэтому я не могу посмотреть на консоль разработчика.
Я подумал, что это может быть проблема с некоторыми функциями ES6, не работающими в сочетании с механизмом рендеринга.Таким образом, я импортировал все полифилы, которые я могу себе представить, но это все равно не работает.
Как я уже сказал, приложение довольно сложное, поэтому вот некоторые выдержки, которые могут помочь найти проблему.
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta
content="minimum-scale=1, width=device-width, initial-scale=1, shrink-to-fit=no"
name="viewport"
/>
<meta content="#000000" name="theme-color"/>
<link href="%PUBLIC_URL%/manifest.json" rel="manifest"/>
<link href="%PUBLIC_URL%/apple-icon-57x57.png" rel="apple-touch-icon" sizes="57x57">
<link href="%PUBLIC_URL%/apple-icon-60x60.png" rel="apple-touch-icon" sizes="60x60">
<link href="%PUBLIC_URL%/apple-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="%PUBLIC_URL%/apple-icon-76x76.png" rel="apple-touch-icon" sizes="76x76">
<link href="%PUBLIC_URL%/apple-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
<link href="%PUBLIC_URL%/apple-icon-120x120.png" rel="apple-touch-icon" sizes="120x120">
<link href="%PUBLIC_URL%/apple-icon-144x144.png" rel="apple-touch-icon" sizes="144x144">
<link href="%PUBLIC_URL%/apple-icon-152x152.png" rel="apple-touch-icon" sizes="152x152">
<link href="%PUBLIC_URL%/apple-icon-180x180.png" rel="apple-touch-icon" sizes="180x180">
<link href="%PUBLIC_URL%/android-icon-192x192.png" rel="icon" sizes="192x192" type="image/png">
<link href="%PUBLIC_URL%/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png">
<link href="%PUBLIC_URL%/favicon-96x96.png" rel="icon" sizes="96x96" type="image/png">
<link href="%PUBLIC_URL%/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png">
<meta content="#ffffff" name="msapplication-TileColor">
<meta content="./favicon/ms-icon-144x144.png" name="msapplication-TileImage">
<title>Shortbox</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</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(
<BrowserRouter>
<LastLocationProvider>
<ScrollContext>
<SnackbarProvider maxSnack={3}
action={[
<Button key="hide" className="snackbarbtn" color="primary" size="small">
Verbergen
</Button>
]}>
<CookiesProvider>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</CookiesProvider>
</SnackbarProvider>
</ScrollContext>
</LastLocationProvider>
</BrowserRouter>,
document.getElementById('root')
);
Эти выдержки из моей среды разработки, так что не удивляйтесь настройке dev.:)
Я строю с
REACT_APP_ENV=production npm run build
Любая идея, почему она не работает на этом конкретном устройстве.Я не в курсе.
Заранее спасибо!