A couple of things.
- Please share what
ionic infooutputs. - Are you using Vite or the Vue CLI?
- What versions of Android and iOS are you testing on?
↧
Running on iOS and Android 'image/png' is not a valid JavaScript MIME type
↧
Running on iOS and Android 'image/png' is not a valid JavaScript MIME type
Here is the ionic info:
Ionic:
Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.1.1
Capacitor:
Capacitor CLI : 5.0.5
@capacitor/android : 5.0.5
@capacitor/core : 5.0.5
@capacitor/ios : 5.0.5
Utility:
cordova-res : not installed globally
native-run : 1.7.2
System:
NodeJS : v18.16.1 (/usr/local/bin/node)
npm : 9.5.1
OS : macOS Big Sur
I think I am using Vite based on the terminal showing…
vite --host=localhost --port=8100
[vite] ➜ Local: http://localhost:8100/
[vite] ➜ press h to show help
[INFO] Development server running!
Local: http://localhost:8100
Use Ctrl+C to quit this process
[INFO] Browser window opened to http://localhost:8100!
[vite] 3:21:57 PM [vite] page reload src/App.js
My iOS Deployment Target is iOS 13.0
Android appears to be Pixel 3a_API_31 Android 13.0 Google APIs | arm64
↧
↧
Running on iOS and Android 'image/png' is not a valid JavaScript MIME type
First, Ionic v7 only supports iOS >=14.
What does your .browserlistrc look like (if it exists)?
What does your vite.config.ts file look like?
EDIT
What I am thinking is that you are running in a version that isn’t supported. For Android, I would try a Pixel 4. Some older emulators are running really old Android WebView versions.
Also, depending on when you created your project, it may not include legacy builds. I created a PR here to bring Vite inline with versions Ionic supports.
↧
Running on iOS and Android 'image/png' is not a valid JavaScript MIME type
Thank you so much for helping me here!
I did try to run it with iOS15 and it gives the same error
[Error] TypeError: 'image/png' is not a valid JavaScript MIME type.
promiseReactionJob
I didn’t realize that about Ionic v7
.browserlistrc
Chrome >=79
ChromeAndroid >=79
Firefox >=70
Edge >=79
Safari >=14
iOS >=14
vite.config.ts
import legacy from '@vitejs/plugin-legacy'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
legacy()
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
build: {
rollupOptions: {
external: ['/images/eos-logo.png', '/images/traction-library.png', '/images/eos_sidebar_logo.png']
}
}
})
↧
How to disable ion-item focusing the input inside?
I have little bit same problem. ion-item-sliding has ion-item inside, which has one ion-input. And it has focus at every click on ion-item, and shows keyboard on mobile phone.
Solution: wrap content in ion-item in div:
< div class=“item-wrapper” (click)=“blurInput($event)” >
…
< ion-input #myNumberInput (click)=“focusInput($event)” [(ngModel)]=“quantity” >< /ion-input >
…
< /div >
in ts:
@ViewChild(‘myNumberInput’, { static: false }) myNumberInput: IonInput;
public focusInput(event) {
event.preventDefault();
event.stopPropagation();
this.myNumberInput.getInputElement().then((inputElement: HTMLInputElement) => inputElement.focus());
}
public blurInput(event = null) {
if (event) {
event.preventDefault();
event.stopPropagation();
}
if (this.myNumberInput) {
this.myNumberInput.getInputElement().then((inputElement: HTMLInputElement) => {
setTimeout(() => inputElement.blur(), 0);
});
}
}
So, blurInput() - fixes autofocus on input. focusInput() - let you focus on input when you need it.
↧
↧
Running on iOS and Android 'image/png' is not a valid JavaScript MIME type
What’s up with the images in the rollupOptions? Those seem suspect. Maybe try removing them and see.
↧
Vue wrapper doesn't work when I publish to NPM
I am going to answer my own question here because I received help on the Stencil Discord category.
The answer(from Discord user KAROTTE) is:
You have set the enableImportInjection https://stenciljs.com/docs/config-extras#enableimportinjection
So the top part of my stencil.config.js file looks like this:
export const config: Config = {
namespace: 'stencil-library',
extras: {
enableImportInjection: true
},
↧
Error after changing app name
(post deleted by author)
↧
Using Build Env Secrets at Run Time
Thanks for the help. About what was expected from a dying community. I’m switching to React. Done with Ionic.
↧
↧
Error after changing app name
Thank you! This should be promoted to the top. For me, it was line 216.
↧
Ionic 4 + React: How Can I close an IonItemSliding?
Worked for me. Two for two with your suggestions. Thanks!
↧
Ionic 4 + React: How Can I close an IonItemSliding?
I have been doing this for a while, you should checkout my YouTube there is a lot of ionic content there Aaron Saunders - YouTube
↧
Override icon urls
just shared my findings and possible workaround:
↧
↧
Ionic v3 project convert to v4
I want to convert my v3 project with v4 but when i try to create a ionic project it was generating the v7.1.1 project based on cli . anyone know the solution help me out
↧
Ionic 6 Vue, IonLoading confusion
I have these two IOS apps.
the config app scans for our devices, and then provides an editor of the data
I use a modal to cover the edit page until the data is read from the device
all caused by a click on a row in the main page view
<template>
<ion-loading trigger="open-scanning" message="getting configuration..." spinner="circles"></ion-loading>
</template>
<script>
import { IonLoading } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { /*IonButton,*/ IonLoading },
});
</script>
the page opening the editor modal, opens this one first, then closes this when the data arrives
and opens the editor modal
// create the waiting modal
let scanninghandle = await modalController.create({
component: ScanningModal
})
// put it up
scanninghandle.present();
...
let EditorModalHandle = await modalController.create({
component: EditorModal,
componentProps: {
...
}
});
this.LogIt("after edit modal create")
scanninghandle.dismiss()
EditorModalHandle.present();
this.LogIt("calling onDidDismiss()")
let updatedObject = await EditorModalHandle.onDidDismiss();
all is cool… got the spinning circles in the middle of the page
now, I need a similar capability in the other app…
component routes to view
view in onViewDidEnter uses the same template and the same code
to put up the same content while the app is scanning for the hardware
the dialog panel comes up… but the loading content is not present
the modal files are identical, no button to trigger the loading
no click on this second one
let scanninghandle = await modalController.create({
component: ScanningModal
})
// put it up
console.log("in select present modal")
scanninghandle.present();
.... scanning in async method
scanninghandle.dismiss()
what am I doing wrong?
I also tried the inline ion-modal tag w isOpen and got the same results
↧
What are limits on number of Environments in each pricing plan?
Looking at what plan is best suited for me I see the Plan Details matrix, that limits seats, automations, concurrent builds, native configs, and Environment Variables. The later I interpret as number of variables one can set in each of the Environments one creates. My qusetion - how many environments can I create? I don’t see it mentioned. Is that unlimited in all plans? I have multiple flavors, so want to create environments for each. How many do you guys have?
↧
Unexpected behaviour of ion-input in iOS
Hi guys, I’m having the next issue:
Yesterday I was running mi app in development mode, and when I swtich to iOS mode a bug came up. I could notice that when I have more than one ion-input in a tab something weird happens, and that is my app redirects home when I give focus to any of the ion-inputs which are not the first in order of appearence (vertical order). So, it is something wrong in iOS trying to have more than one ion-input per tab? by the way I’m using Ionic 6.
↧
↧
FCM.subscribeTo not working on iOS
Describe the bug
The app is not subscribing to any topic on iOS devices. There is no issue with Android devices.
To Reproduce
Steps to reproduce the behavior:
- Create a new ionic project (6/7)
- Add Capacitor 5 (iOS)
- Complete the Ionic Post Notification setup steps
- Subscribe to a topic using capacitor-community/fcm
Expected behavior
The app should subscribe to the topics on iOS just like Android.
Code
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ActionPerformed, PushNotificationSchema, PushNotifications, Token } from '@capacitor/push-notifications';
import { Preferences } from '@capacitor/preferences';
import { FCM } from '@capacitor-community/fcm';
interface SubscriptionPreferences {
[key: string]: boolean;
}
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
})
export class AppComponent {
subscriptionPreferences: SubscriptionPreferences = {};
topics = ['Announcements', 'Calendar', 'Upcoming-Events', 'Block-Rotation', 'Clubs', 'Sports', 'Cafeteria', 'Contests', 'University-Advising', 'New-Student-Help', 'Parent-Info', 'Staff-Directory', 'ios'];
constructor(private router: Router) {}
ngOnInit() {
console.log('Initializing HomePage');
PushNotifications.requestPermissions().then(result => {
if (result.receive === 'granted') {
// Register with Apple / Google to receive push via APNS/FCM
PushNotifications.register();
} else {
// Show some error
}
});
Preferences.get({ key: 'firstTimeOpen' }).then(result => {
const isFirstTimeOpen = result.value;
if (isFirstTimeOpen === null || isFirstTimeOpen === 'true') {
this.topics.forEach(topic => {
FCM.subscribeTo({ topic: topic })
.then(() => {
console.log(`Subscribed to topic ${topic}`);
this.subscriptionPreferences[topic] = true;
Preferences.set({ key: 'firstTimeOpen', value: 'true' });
})
.catch((error) => {
Preferences.set({ key: 'firstTimeOpen', value: 'false' });
});
});
this.subscriptionPreferences = this.topics.reduce((acc: SubscriptionPreferences, topic: string) => {
acc[topic] = true;
return acc;
}, {});
Preferences.set({ key: 'subscriptionPreferences', value: JSON.stringify(this.subscriptionPreferences) });
}
Preferences.get({ key: 'subscriptionPreferences' }).then(result => {
const preferencesValue = result.value;
this.subscriptionPreferences = preferencesValue ? JSON.parse(preferencesValue) : {};
});
console.log(this.subscriptionPreferences)
});
PushNotifications.addListener('registration', (token: Token) => {
console.log('Push registration success, token: ' + token.value);
});
PushNotifications.addListener('registrationError', (error: any) => {
console.log('Error on registration: ' + JSON.stringify(error));
});
PushNotifications.addListener(
'pushNotificationReceived',
(notification: PushNotificationSchema) => {
alert('Notification received: ' + notification.title + '\n' + notification.body);
},
);
PushNotifications.addListener(
'pushNotificationActionPerformed',
(notification: ActionPerformed) => {
console.log('Push action performed: ' + JSON.stringify(notification));
if (notification.notification) {
const notificationData = notification.notification.data;
if (notificationData && notificationData.page) {
this.router.navigateByUrl(notificationData.page);
}
}
},
);
}
}
↧
Ionic 6 Vue, IonLoading confusion
whatever, moved to using the loadingController instead of trying to do a modal with a modal…
↧
[ERROR] Network connectivity error occurred, are you offline?
worked like a charm mate, thanks 
↧