I am hosting astro SSR site on Netlify. It works well everywhere except when I test on iPhone 6 and older. Basically all script executions are stopped and the site is no longer interactive.
Errors from Safari on iPhone 5SE Simulator:
[Error] SyntaxError: Unexpected token '.'
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored.
[Error] The source list for Content Security Policy directive 'script-src' contains an invalid source: ''strict-dynamic''. It will be ignored. (x2)
[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '?'
[Error] Unhandled Promise Rejection: SyntaxError: Unexpected token '?'
I am not really sure how to fix this issue. Any help would be appreciated.
PS: I used svelte for building astro islands and google recaptcha(v3) in the page that is being tested. The page works fine on development environment.
This sounds like you have some code using optional chaining, e.g. object?.potentiallyMissingProperty. Per caniuse, this only works on iOS Safari versions 13.4 and later. An iPhone 6 can only install iOS 12, so using this syntax will throw an error on those devices.
This appears to be an issue within Astro, which does not support some older browsers. Astro also scopes CSS with :where, which will also break on older versions of Safari. On those browsers, your page's HTML should render, but any JavaScript will not work and should be treated as a progressive enhancement.
Related
Doing cross-browser support using a Iphone 5s emulator running safari 10 and under I noticed some code is not supported.
https://github.com/stripe-samples/accept-a-card-payment/blob/master/using-webhooks/client/web/script.js
When going through the error logs, I found that 'fetch' is not supported in that browser so I installed a polyfill
and that required 'promise' so I installed another polyfill
and now I'm getting an error with this code:
.then(function({ stripe, card, clientSecret }) {
The curly brackets aren't supported, I am not sure where to go with this, if there is a straight forward fix or should I try to recode this .js file without using polyfills.
I am programming an app using cordova and testing it on android 8.0.0 it works fine.
But on my friend's phone (android 4.4.4) it does not work, I got these errors in the console log.
Uncaught SyntaxError: Unexpected reserved word Widget.js:9
Uncaught SyntaxError: Unexpected reserved word Image.js:8
Uncaught SyntaxError: <unknown message reserved_word> Button.js:7
Uncaught SyntaxError: <unknown message reserved_word> TextArea.js:8
Uncaught SyntaxError: <unknown message reserved_word> Effect.js:8
Uncaught SyntaxError: Unexpected reserved word View.js:9
Uncaught SyntaxError: <unknown message reserved_word> User_interface.js:8
Uncaught SyntaxError: <unknown message reserved_word> Communication.js:8
Uncaught SyntaxError: <unknown message reserved_word> App.js:7
Those errors block on the keyword "class"
Uncaught SyntaxError: Unexpected token ) index.js:16
and also block on :
AndroidFullScreen.immersiveMode(()=>{},()=>{});
Here I think it doesn't recognize the arrow function but i'm not sure.
I would like to know if I can fix it or the phone is just too old for my app?
If you need other information tell me and I will provide them :)
Thanks in advance
Before Android 4.4 cordova was using the old android browser (very old support of html 5).
Starting from android 4.4 the android browser was replaced by Chrome but the version of Chrome used by the webview couldn't be upgraded (version 36 for 4.4).
Since android 5.0, chrome is now in an apk and can be updated.
Arrow functions require a minimum Chrome version of 45, that's why your app doesn't work correctly on your friend's phone.
If want your app to work correctly of phones older than android 5, you can either:
not use too recent javasctipt (check support on caniuse)
use the crosswalk plugin to embed the webview in your app
Crosswalk was supposed to always use the latest version of chromium but unfortunatly the project is no more updated so you will not be able to use the latest javascript updates either. (latest version of Crosswalk uses chromium version 53 wich is much more recent than the 36 used in android 4.4)
The advantage of Crosswaalk is that your app has the same support of html/js/css on all device so you know how your app will behave/look like on all devices.
Using Crosswalk will lead to a much bigger APK so that's not always the best option.
You could also build two different apk versions, one for android <5.0 and one for newer.
Do you know anyone who's forked the original and updated chromium to 55 or higher by chance?
I've just installed Angular and I'm facing two blank page problems:
1) Blank Angular.io Website On iOS 7
My iPad (running iOS 7) just sees a blank page when I try to load the Angular.io website, both via Safari and Chrome apps. I thought iOS 7 is supported by Angular (source), isn't it? It does display properly on my iPhone running iOS 9.
It is important that the Angular website I will build can be viewed properly on older devices too, so I wanted to know if it has problems supporting iOS 7.
2) Blank Mobile Page With Ng Serve
I installed the Angular test app and I can see the test page fine on my computer browsers (both local and networked computers).
However, if I load it on my iPhone or iPad, the page is completely blanked, both on Safari and Chrome apps. I do see the tab's title "My App", so it is able to connect properly to my ng serve --host 0.0.0.0 but the page just does not render. It does render fine on my Android 7 device's stock & Chrome browsers.
I've connected my iPhone / iPad's Safari to my Mac's Safari inspector, and got the following errors when loading the My App demo page:
[Error] SyntaxError: Unexpected token 'const'
../../node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0 (vendor.bundle.js:514)
__webpack_require__ (inline.bundle.js:55)
(anonymous function) (main.bundle.js:66)
__webpack_require__ (inline.bundle.js:55)
webpackJsonpCallback (inline.bundle.js:26)
As for Angular.io website, the following error shows:
[Error] ReferenceError: Can't find variable: WeakMap
LMZF (main.7d151f1f7f0a94ae41e1.bundle.js:1:142339)
n (inline.ad7fd106f6c55b1fd8ed.bundle.js:1:106)
cDNt (main.7d151f1f7f0a94ae41e1.bundle.js:1:284246)
n (inline.ad7fd106f6c55b1fd8ed.bundle.js:1:106)
(anonymous function) (main.7d151f1f7f0a94ae41e1.bundle.js:1:2317)
n (inline.ad7fd106f6c55b1fd8ed.bundle.js:1:106)
webpackJsonp (inline.ad7fd106f6c55b1fd8ed.bundle.js:1:430)
I tried searching around and some solutions mentioned about updating webpack-dev-server, enabling polyfills, or changing tsconfig.json to es5, all of which I tried but it didn't seem to work.
Can someone please advise? Thanks.
After updating Google Chrome (v. >= 43.0.2357.65) error was displayed in console: Uncaught SyntaxError: Unexpected token function in different places of my bundle.js.
It appears only when bundle.js returns 200 http status. But after refresh page this file returns 304 http status and all works fine without errors. I'm using webpack v.1.8.5 and React v.0.13.2
In other browsers code works fine, and in Google Chrome before update it works fine.
See this Chrome issue and this related Twitter conversation from the person who filed it.
If you're using an older version of Node.js in your build, updating it might fix this. From the issue:
broken.js was the result of a build script running in Node.js 0.10.18, which seems to have written the file with some peculiar character encoding issues
I'm not sure what this error is coming from, nor what it is or what it means. Here is the error I get:
[ERROR] : V8Exception: Exception occurred at undefined:1: Uncaught SyntaxError: Unexpected token u
Now, I am creating an HTML 5 Cross platform (Android/iOS) application using Titanium Studio IDE. I'm not sure if this is an Android specific error or a Titanium Studio specific error. I know it can't be iOS because I only get this error when I am trying to test the app on Android tablet. (The app installs and runs on the device though).
NOTE: The code I am working on is proprietary so I can't show it. But what I'm mostly interested in an explanation of this error. Generally, What is this error and when does some one come across it?