ChunkLoadError: Loading chunk failed

Capacitor
1

I have a very strange behavior on my ionic app (ionic-6, vue-3)

My working project is working fine on the web, and on my 1 year old Android phone, but I get a “ChunkLoadError: Loading chunk XXX failed.” error only on an older Android phone with Android 5 (sdk 21).

As if the problem was linked to the Android version.

The problem only happen in a redirection from a page like this:

{
        beforeEnter: guardMyroute,
        path: 'List',
        name: 'list',
        component: () => import('@/components/modules/list.vue'),
      },
      {
        beforeEnter: guardMyroute,
        path: 'List/:id',
        name: 'details',
        component: () => import('@/components/modules/details.vue'),
      },

To navigate to my route, I click on a ion-button and execute a router push:

<ion-button color="success" 
   class="custom-button button-continue" 
   @click="showDetails(article.id)">
   <ion-icon :icon="playOutline"></ion-icon>
</ion-button>

async showDetails(id: string) {
   await this.router.push("/modules/list/" + id);
}

I saw a few other posts with similar problems but nothing really like mine and nothing resolved.

Can anyone help me please ?

3

I ran the app with Android Studio and here is what I got :

E/Capacitor: JavaScript Error: {“type”:“js.error”,“error”:{“message”:“Uncaught SyntaxError: Unexpected token .”,“url”:“http://localhost/js/631.b0843ac2.js",“line”:1,“col”:29988,“errorObject”:"{}”}}
E/Capacitor/Console: File: http://localhost/js/chunk-vendors.b09c2b0f.js - Line 3 - Msg: SyntaxError: Unexpected token .
E/Capacitor/Console: File: http://localhost/js/631.b0843ac2.js - Line 1 - Msg: Uncaught SyntaxError: Unexpected token .
E/Capacitor/Console: File: http://localhost/js/chunk-vendors.b09c2b0f.js - Line 193 - Msg: ChunkLoadError: Loading chunk 631 failed.
(missing: http://localhost/js/631.b0843ac2.js)
E/Capacitor/Console: File: http://localhost/js/chunk-vendors.b09c2b0f.js - Line 174 - Msg: ChunkLoadError: Loading chunk 631 failed.
(missing: http://localhost/js/631.b0843ac2.js)

The file (android\app\src\main\assets\public\js\631.b0843ac2.js) at line:1, col:29988 is very interesting because I found something like “object?.element” and it was the compiled version on my code, an if() statement after an async function.

I changed mycode from
if (object?.element == “abc”){…}
to if (object != undefined && object.element == “abc”) {…}

And it worked !

Again, I don’t understand why it happens only on the phone with Android API 21 but not the other devices.