Running on iOS and Android 'image/png' is not a valid JavaScript MIME type

Ionic Framework Ionic Vue
1

I am just getting started with Ionic / Vue. Been a Vue dev for a long time. But these dependencies with iOS and Android are killing me. I think I have gotten past all the little nuances of both of these but something just isn’t quit right somewhere. All I get in the sims are a white screen. When I debug it via safari and the console I see this error…

[Error] TypeError: 'image/png' is not a valid JavaScript MIME type.
	promiseReactionJob

I searched my entire Ionic / Vue project for ‘image/png’ and that doesn’t exist anywhere unless it is in an NPM module somewhere. I also couldn’t find it anywhere via xcode either.

I really have no idea what to look for next here any help pointing me at something, I would be grateful.

Cheers,
Travis

2

A couple of things.

  • Please share what ionic info outputs.
  • Are you using Vite or the Vue CLI?
  • What versions of Android and iOS are you testing on?
1 Like
3

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

4

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.

5

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']
    }
  }
})
6

What’s up with the images in the rollupOptions? Those seem suspect. Maybe try removing them and see.

1 Like
7

That worked thank you so much, weird thing is something I read said to add any thing in the public directory to this.

1 Like
8

Excellent! Yeah, anything in the public directory should just work out-of-the-box.