iOS : Capacitor 6 on iOS 16

Capacitor
1

Hello,

When I run our Capacitor 6 app on an older iOS version (this case 16.2, we got bug reports with the same symptoms from users with 15.3), the screen will stay blank after the splash-screen (which has auto-hide configured).

When I connect with the Safari debugger, I don’t see anything in the console, but when I reload the page, I get following error messages in the console:

[Warning] Google Maps JavaScript API has been loaded directly without loading=async. This can result in suboptimal performance. For best-practice loading patterns please see https://goo.gle/js-api-loading (js, line 300)
[Error] SyntaxError: Unexpected token '{' — polyfills.0446d44f78953af8.js:1
	error
	(anonymous function) (user-script:2:866)
	(anonymous function)
	promiseReactionJob
[Error] SyntaxError: Unexpected token '{'
	(anonymous function) (polyfills.0446d44f78953af8.js:1)
[Error] SyntaxError: Unexpected token '{' — main.9368107140ab66a9.js:1
	error
	(anonymous function) (user-script:2:866)
	(anonymous function)
	promiseReactionJob
[Error] SyntaxError: Unexpected token '{'
	(anonymous function) (main.9368107140ab66a9.js:1)

I’m not sure what to make of the error. Is webkit too old, maybe? Capacitor requires iOS 13 as a minimum OS version, so I’m wondering what’s going wrong.

The same app runs fine on an iOS 18 device.

Any help is greatly appreciated.

Some more info:

first few lines of polyfills.js

(self.webpackChunkapp = self.webpackChunkapp || []).push([[3461], {
    90321: (Lt, yt, lt) => {
        "use strict";
        const H = ":";
        Error;
        const Gt = function(u, ...f) {
                if (Gt.translate) {
                    const _ = Gt.translate(u, f);

first few lines of main.js:

(self.webpackChunkapp = self.webpackChunkapp || []).push([[8792], {
    41760: function(ze, ce, l) {
        "use strict";
        var i = this && this.__extends || function() {
            var g = function(p, y) {
                return (g = Object.setPrototypeOf || {
```
2

Modern frameworks only support modern Chrome/Webkit versions, you usually have to configure them to support older versions and sometimes even use polyfills

Check this answer for angular and Android, but should be similar for iOS

3

Thanks for the reply. That hint helped a bit.

It turned out, an older version of our app worked well on the old iOS version, but the current version not. I dug through the changes and discovered that by some npm install actions, newer patch versions of various angular dependencies and even newer minor version of babel were used (7.25.x instead of 7.24.x). When I reverted back to the previous versions of these dependencies, the app works again.

4

I’m having the exact same problem. What dependencies did you have to revert back to?

5

The diff of the package-lock.json is huge, so I won’t bother you with that.

I think it’s probably related to one of the @angular dependencies, which many have different patch versions, or more likely one of the @babel dependencies, which had different minor versions. It’s probably the easiest to check what version changes you had recently and find the change which broke your app on older iOS versions.

Sorry if I can’t be of any more help on this topic.

6

Thanks for your reply. I will start there.