ReactJS App is showing blank on old iPhone, iOS 9.3.22019 Community Moderator ElectionHow do I fix React.js iOS blank screen?How can I develop for iPhone using a Windows development machine?iPhone App Minus App Store?How do you beta test an iphone app?Starting iPhone app development in Linux?Can I embed a custom font in an iPhone application?How to link to apps on the app storeHow to show “Done” button on iPhone number padSymbolicating iPhone App Crash ReportsiPhone App Icons - Exact Radius?How to develop or migrate apps for iPhone 5 screen resolution?
Is it possible to avoid unpacking when merging Association?
Are small insurances worth it?
Gaining more land
Why do we say ‘pairwise disjoint’, rather than ‘disjoint’?
What would be the most expensive material to an intergalactic society?
Does "Until when" sound natural for native speakers?
Confusion about Complex Continued Fraction
Power Strip for Europe
Are all players supposed to be able to see each others' character sheets?
How exactly does an Ethernet collision happen in the cable, since nodes use different circuits for Tx and Rx?
Can one live in the U.S. and not use a credit card?
Does Christianity allow for believing on someone else's behalf?
How to resolve: Reviewer #1 says remove section X vs. Reviewer #2 says expand section X
Doesn't allowing a user mode program to access kernel space memory and execute the IN and OUT instructions defeat the purpose of having CPU modes?
How do spaceships determine each other's mass in space?
Why couldn't the separatists legally leave the Republic?
Called into a meeting and told we are being made redundant (laid off) and "not to share outside". Can I tell my partner?
Is it possible that a question has only two answers?
What's the 'present simple' form of the word "нашла́" in 3rd person singular female?
Can we track matter through time by looking at different depths in space?
Trig Subsitution When There's No Square Root
Is a piano played in the same way as a harmonium?
From an axiomatic set theoric approach why can we take uncountable unions?
Windows Server Data Center Edition - Unlimited Virtual Machines
ReactJS App is showing blank on old iPhone, iOS 9.3.2
2019 Community Moderator ElectionHow do I fix React.js iOS blank screen?How can I develop for iPhone using a Windows development machine?iPhone App Minus App Store?How do you beta test an iphone app?Starting iPhone app development in Linux?Can I embed a custom font in an iPhone application?How to link to apps on the app storeHow to show “Done” button on iPhone number padSymbolicating iPhone App Crash ReportsiPhone App Icons - Exact Radius?How to develop or migrate apps for iPhone 5 screen resolution?
Scenario
I created a test app, which was started via npx create-react-app my-app-name ... and then built via npm run build. The reactJS app is working on desktop browsers, but i am getting a blank screen on my iPhone (iOS 9.3.2); On my phone, I have tested on Safari and latest update of Google Chrome.
other tests
- The mobile emulators work fine
- The app works fine on iOS 11 + (iPhone 5S tested)
- The app works on Android 5 +
- The app works on Edge on Windows mobile 10
from research
- I saw an existing question, the scripts are loaded after the app as you can see in my HTML (below)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Akber Iqbal | About(React)</title>
<link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static_about/js/2.c65df5fc.chunk.js"></script>
<script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
<script>
! function(l) ([])
</script>
</body>
</html>- In my code, I have used arrow functions in 2 places only...
in ComponentDidMount()
fetch(stackOverflowURL)
.then(initialRes => initialRes.json())
.then(
arrayRes => this.setState( error: null, isLoaded: true, stackOverflowItems: arrayRes.items[0] );
, errr => this.setState( error: errr, isLoaded: false ); console.log(errr);
);
i also used arrow functions in the render()
if (this.state.isLoaded)
const getItems = this.state.aiArticles.map((item, index) =>
return (
<div className="aiArticle" key=index>
<img src=item.imgsrc alt=item.alttext className="img-responsive" />
<h3 className="articleHeading"> <a href=item.articlelink>item.articleheading</a> </h3>
<p>item.publisheddate</p>
</div>)
)
return <div>getItems</div>
else
return <p>Wait for the rest Api to load the articles </p>
Question:
Is there a workaround to get the app to work on old devices?
Screenshots
ios iphone reactjs
google-chrome asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
add a comment |
Scenario
I created a test app, which was started via npx create-react-app my-app-name ... and then built via npm run build. The reactJS app is working on desktop browsers, but i am getting a blank screen on my iPhone (iOS 9.3.2); On my phone, I have tested on Safari and latest update of Google Chrome.
other tests
- The mobile emulators work fine
- The app works fine on iOS 11 + (iPhone 5S tested)
- The app works on Android 5 +
- The app works on Edge on Windows mobile 10
from research
- I saw an existing question, the scripts are loaded after the app as you can see in my HTML (below)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Akber Iqbal | About(React)</title>
<link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static_about/js/2.c65df5fc.chunk.js"></script>
<script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
<script>
! function(l) ([])
</script>
</body>
</html>- In my code, I have used arrow functions in 2 places only...
in ComponentDidMount()
fetch(stackOverflowURL)
.then(initialRes => initialRes.json())
.then(
arrayRes => this.setState( error: null, isLoaded: true, stackOverflowItems: arrayRes.items[0] );
, errr => this.setState( error: errr, isLoaded: false ); console.log(errr);
);
i also used arrow functions in the render()
if (this.state.isLoaded)
const getItems = this.state.aiArticles.map((item, index) =>
return (
<div className="aiArticle" key=index>
<img src=item.imgsrc alt=item.alttext className="img-responsive" />
<h3 className="articleHeading"> <a href=item.articlelink>item.articleheading</a> </h3>
<p>item.publisheddate</p>
</div>)
)
return <div>getItems</div>
else
return <p>Wait for the rest Api to load the articles </p>
Question:
Is there a workaround to get the app to work on old devices?
Screenshots
ios iphone reactjs
google-chrome asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
just to test, try some other browser. Any other browser then safari and chrome.
– Akshay Mulgavkar
Mar 7 at 5:08
@AkshayMulgavkar, any browser you'd recommend? Chrome+Safari dominate the browser market on iPhone, the application should work on these...
– Akber Iqbal
Mar 7 at 5:22
add a comment |
Scenario
I created a test app, which was started via npx create-react-app my-app-name ... and then built via npm run build. The reactJS app is working on desktop browsers, but i am getting a blank screen on my iPhone (iOS 9.3.2); On my phone, I have tested on Safari and latest update of Google Chrome.
other tests
- The mobile emulators work fine
- The app works fine on iOS 11 + (iPhone 5S tested)
- The app works on Android 5 +
- The app works on Edge on Windows mobile 10
from research
- I saw an existing question, the scripts are loaded after the app as you can see in my HTML (below)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Akber Iqbal | About(React)</title>
<link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static_about/js/2.c65df5fc.chunk.js"></script>
<script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
<script>
! function(l) ([])
</script>
</body>
</html>- In my code, I have used arrow functions in 2 places only...
in ComponentDidMount()
fetch(stackOverflowURL)
.then(initialRes => initialRes.json())
.then(
arrayRes => this.setState( error: null, isLoaded: true, stackOverflowItems: arrayRes.items[0] );
, errr => this.setState( error: errr, isLoaded: false ); console.log(errr);
);
i also used arrow functions in the render()
if (this.state.isLoaded)
const getItems = this.state.aiArticles.map((item, index) =>
return (
<div className="aiArticle" key=index>
<img src=item.imgsrc alt=item.alttext className="img-responsive" />
<h3 className="articleHeading"> <a href=item.articlelink>item.articleheading</a> </h3>
<p>item.publisheddate</p>
</div>)
)
return <div>getItems</div>
else
return <p>Wait for the rest Api to load the articles </p>
Question:
Is there a workaround to get the app to work on old devices?
Screenshots
ios iphone reactjs
google-chrome asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
Scenario
I created a test app, which was started via npx create-react-app my-app-name ... and then built via npm run build. The reactJS app is working on desktop browsers, but i am getting a blank screen on my iPhone (iOS 9.3.2); On my phone, I have tested on Safari and latest update of Google Chrome.
other tests
- The mobile emulators work fine
- The app works fine on iOS 11 + (iPhone 5S tested)
- The app works on Android 5 +
- The app works on Edge on Windows mobile 10
from research
- I saw an existing question, the scripts are loaded after the app as you can see in my HTML (below)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Akber Iqbal | About(React)</title>
<link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static_about/js/2.c65df5fc.chunk.js"></script>
<script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
<script>
! function(l) ([])
</script>
</body>
</html>- In my code, I have used arrow functions in 2 places only...
in ComponentDidMount()
fetch(stackOverflowURL)
.then(initialRes => initialRes.json())
.then(
arrayRes => this.setState( error: null, isLoaded: true, stackOverflowItems: arrayRes.items[0] );
, errr => this.setState( error: errr, isLoaded: false ); console.log(errr);
);
i also used arrow functions in the render()
if (this.state.isLoaded)
const getItems = this.state.aiArticles.map((item, index) =>
return (
<div className="aiArticle" key=index>
<img src=item.imgsrc alt=item.alttext className="img-responsive" />
<h3 className="articleHeading"> <a href=item.articlelink>item.articleheading</a> </h3>
<p>item.publisheddate</p>
</div>)
)
return <div>getItems</div>
else
return <p>Wait for the rest Api to load the articles </p>
Question:
Is there a workaround to get the app to work on old devices?
Screenshots
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Akber Iqbal | About(React)</title>
<link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static_about/js/2.c65df5fc.chunk.js"></script>
<script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
<script>
! function(l) ([])
</script>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="/manifest.json" />
<title>Akber Iqbal | About(React)</title>
<link href="/static_about/css/main.314f812b.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="/static_about/js/2.c65df5fc.chunk.js"></script>
<script src="/static_about/js/main.cd9a0ba3.chunk.js"></script>
<script>
! function(l) ([])
</script>
</body>
</html>ios iphone reactjs
google-chrome ios iphone reactjs
google-chrome asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
edited Mar 7 at 5:21
Akber Iqbal
asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
asked Mar 7 at 4:51
Akber IqbalAkber Iqbal
2,64031226
2,64031226
just to test, try some other browser. Any other browser then safari and chrome.
– Akshay Mulgavkar
Mar 7 at 5:08
@AkshayMulgavkar, any browser you'd recommend? Chrome+Safari dominate the browser market on iPhone, the application should work on these...
– Akber Iqbal
Mar 7 at 5:22
add a comment |
just to test, try some other browser. Any other browser then safari and chrome.
– Akshay Mulgavkar
Mar 7 at 5:08
@AkshayMulgavkar, any browser you'd recommend? Chrome+Safari dominate the browser market on iPhone, the application should work on these...
– Akber Iqbal
Mar 7 at 5:22
just to test, try some other browser. Any other browser then safari and chrome.
– Akshay Mulgavkar
Mar 7 at 5:08
just to test, try some other browser. Any other browser then safari and chrome.
– Akshay Mulgavkar
Mar 7 at 5:08
@AkshayMulgavkar, any browser you'd recommend? Chrome+Safari dominate the browser market on iPhone, the application should work on these...
– Akber Iqbal
Mar 7 at 5:22
@AkshayMulgavkar, any browser you'd recommend? Chrome+Safari dominate the browser market on iPhone, the application should work on these...
– Akber Iqbal
Mar 7 at 5:22
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036328%2freactjs-app-is-showing-blank-on-old-iphone-ios-9-3-2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55036328%2freactjs-app-is-showing-blank-on-old-iphone-ios-9-3-2%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
just to test, try some other browser. Any other browser then safari and chrome.
– Akshay Mulgavkar
Mar 7 at 5:08
@AkshayMulgavkar, any browser you'd recommend? Chrome+Safari dominate the browser market on iPhone, the application should work on these...
– Akber Iqbal
Mar 7 at 5:22