PWA project fails only on IOS.

[IvanWala]

Hi I upgrading a Quasar v2 PWA from options api to composition api with <script setup> All works like a charm in Windows and Android. The problem is with ios device. It doesn't works in IOS and it throws an error that only affects to all the browsers of this device.

The configuration is:
» Reported at............ 24/7/2024 13:55:49
» Dev mode............... spa
» Pkg quasar............. v2.16.6
» Pkg @quasar/app-vite... v1.9.3
» Browser target......... es2020|firefox115|chrome115|safari14

it fails with es2022 too.

I connected the Xcode simulator to Safari. And the error is:

Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'o.value.default')

It's located in index.js file.

These are the full packages

"dependencies": {
"@quasar/extras": "^1.16.12",
"@quasar/quasar-ui-qmarkdown": "^2.0.0-beta.10",
"axios": "^1.2.1",
"crypto-js": "^4.2.0",
"encrypt-storage": "^2.13.2",
"pinia": "^2.0.11",
"pinia-plugin-persistedstate": "^3.2.1",
"qs": "^6.12.1",
"quasar": "^2.16.6",
"slugify": "^1.6.6",
"uuid": "^10.0.0",
"vue": "^3.0.0",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.0"
},
"devDependencies": {
"@intlify/vite-plugin-vue-i18n": "^3.3.1",
"@quasar/app-vite": "^1.3.0",
"autoprefixer": "^10.4.2",
"postcss": "^8.4.14",
"workbox-build": "^7.1.1",
"workbox-cacheable-response": "^7.1.0",
"workbox-core": "^7.1.0",
"workbox-expiration": "^7.1.0",
"workbox-precaching": "^7.1.0",
"workbox-routing": "^7.1.0",
"workbox-strategies": "^7.1.0"
},

[ajmas]

For any mobile Safari issues I'd always suggest trying them out using the macOS version of Safari too, since the a number of the issues are common across both.

I see the same issue in the Mac version of Safari. I'd suggestion looking through your code for any reference to value.default and start with that. You could also search for the same string in the 'Sources' tab of the inspector and then add a break-point to see what may be going on.

A quick look shows the error is in this block of code (I haven't really explored much to see where the rabbit hole takes me, but it may be router or boot item failure?):

pg(Ga, om).then(e => {
    const [t, n] = Promise.allSettled !== void 0 ? ["allSettled", r => r.map(o => {
        if (o.status === "rejected") {
            console.error("[Quasar] boot error:", o.reason);
            return
        }
        return o.value.default
    })] : ["all", r => r.map(o => o.default)];
    return Promise[t]([me(() => import("./stuff-store.57cff401.js").then(function(r) {
        return r.m
    }), []), me(() => import("./stuff-store.57cff401.js").then(function(r) {
        return r.o
    }), []), me(() => import("./global-components.d9e4f35b.js"), ["assets/global-components.d9e4f35b.js", "assets/global-components.b217e436.css"])]).then(r => {
        const o = n(r).filter(i => typeof i == "function");
        um(e, o)
    })
});

[IvanWala]

Thanks. That code is not mine its a compilation from quasar, And I think it's core code.

[ajmas]

Though there is a good chance that it is triggered by something in your code or configuration. Its always better to blame your code, since it is easier to resolve, otherwise you'll need to create proper proof that it is caused by the library. Did you examine your boot items?

Are you able to share your code?

[codegenic-works]

I experienced something very similar recently where my PWA would load on every device I worked with except iPhone. After trying a lot of different ways to figure out what the root of the issue was, it turned out to be the fact that the Notification API doesn't exist in browsers on iPhone unless users add it to their home screen first. Steps for adding to home screen. As far as I have found, this can only be done with Safari on iPhone.

Being able to get the console logs from a Chrome browser on iPhone was how I finally figured it out.

Yours looks like a different error than mine, but thought it might be worth sharing in case it helps.

[IvanWala]

We have finally decided to return to Options API.