Vue3 App on Tizen OS 5 returns Mime type error

I've created a web app in Vue3 but I can't seem to get it to work on my Smart TV running Tizen 5.

I've already added babel in my solution to tone down the new JS but that isn't the issue.

I keep getting this error:

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

My index.html isn't anything special

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/x-icon" href="./assets/favicon-vkbPXl62.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sportlink Club Info Viewer</title>
    <script type="module" crossorigin src="./assets/index-BNT66VsA.js"></script>
    <link rel="stylesheet" crossorigin href="./assets/index-DJZriVy7.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

The folder in tizen studio looks like this

Root
- assets folders 
  - index-BNT66VsA.js
  - index-DJZriVy7.css
  - favicon-vkbPXl62.ico
  - more images that are used...
- index.html
- config.xml
- icon.png

I've searched everywhere, even asked ChatGPT, but I can't find out why this is happening.

On all other devices like mobile and laptop its working when I use the browser to go to the vue3 app, but when I use the tv browser it isn't and when I check the log the mime type is text/javascript.

The TV emulator is also working fine but that’s Tizen 8.0 I believe.

I hope somebody could help me.

Maybe it helps I don't know but this is my vite.config.js file:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'url';
import { BASE_URL } from './src/config'; // Import the base URL

export default defineConfig({
  base: BASE_URL,
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)), // This sets @ to the /src folder
    },
  },
  build: {
    target: 'es2015', // Specify the JavaScript target version
    minify: false,
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: undefined
      }
    }
  }
});

Solution

change vite config into es5 After changing the Vite configuration:

Target ES5: All modern code is translated to ES5 (for example, let → var). IIFE Output Format: JavaScript code is wrapped in Immediately Invoked Function Expression (IIFE) functions to run in older browsers. Maximum Compatibility: The Tizen browser can now read and run files without requiring type=“module” support.

i hope this fix your problem. oh yah, dont forget to install @vitejs/plugin-legacy

yarn add @vitejs/plugin-legacy regenerator-runtime -D

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { fileURLToPath, URL } from 'url';
import { BASE_URL } from './src/config'; // Import the base URL
import legacy from '@vitejs/plugin-legacy';


export default defineConfig({
  base: BASE_URL,
  plugins: [vue(), legacy({
    targets: ['defaults', 'not IE 11'],
    additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
  }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)), // This sets @ to the /src folder
    },
  },
  build: {
    target: 'es5', // Specify the JavaScript target version
    minify: false,
    sourcemap: true,
    rollupOptions: {
      output: {
        format: 'iife',
      },
    },
  }
});