Why is there no problem with the development mode after using the iframe tag, but when running on a real machine, an error occurs?

[mingwang]

Ionic version:

[x] 4.x
[ ] 5.x

I'm submitting a ...

[x] bug report
[ ] feature request

Current behavior:
Why did I use the iframe tag and set src to a remote address (a web app built by vite+vue3) in the Ionic code? After executing npx cap open Android and starting Android studio, I ran the project on the real machine for debugging. When I switched to the page where the iframe is located, I would get an error message: Capacitor/Console io.ionic.starter E File: https://myapp.com/assets/index-BYIDgwBY.js -Line 9- Msg: Uncaught SyntaxError: Unexpected token. Why is this?

Expected behavior:

Steps to reproduce:

Related code:

<template>
  <ion-page>

    <ion-content :fullscreen="true">
      <iframe style="width: 100%; height: 100%; border: none" src="https://myapp.com" />
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent,IonPage } from '@ionic/vue';
import { useIonRouter } from '@ionic/vue';

const ionRouter = useIonRouter()

window.addEventListener('message', (event) => {
  if (event.data && event.data.type === 'FROM_WEBVIEW') {
    ionRouter.back()
  }
});
</script>

Other information:

Ionic info:

Capacitor/Console io.ionic.starter E File: https://myapp.com/assets/index-BYIDgwBY.js - Line 9 - Msg: Uncaught SyntaxError: Unexpected token ?

[mingwang]

And I noticed that if the src of the iframe I referenced is a web app built on Vue2, there is no such error and the program runs normally

[Sean Perkins]

Hello @NieBarBar these types of support/debugging requests are best to ask in the Discord. The team uses Github issues for bugs within Ionic Framework (the UI components).

Based on your described issue, it could be a number of factors, but unlikely to be related to the web components. If you are able to reproduce this issue specific to Ionic web components, please open a new issue with a minimal reproduction.

Thanks!