Search code examples
javascripttypescriptvue.jsexpressvue-router

MIME Error when using Vue-Router and Express


Everytime I want to access a specific route in Express I get the followwing error in my browser while also having a default and blank Vue HTML without content. Everything works in Vue debug mode but after building everything, only the Home page and the 404 page works.

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

In Express I have the following code:

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);


this.app.use(express.static(`${__dirname}/html`));
this.app.get('/*', (req, res) => res.sendFile(`${__dirname}/html/index.html`));

In my router.ts in vue I have the following code:

import { defineAsyncComponent } from "vue";
import { createRouter, createWebHistory } from "vue-router";

import Natives from '../views/Natives.vue';

const router = createRouter({
  routes: [
    {
      path: "/",
      name: "Home",
      component: defineAsyncComponent(() => import('../views/Home.vue')),
      meta: {
        name: "Home",
      },
    },
    {
      path: "/gta",
      name: "GTA V",
      component: defineAsyncComponent(() =>  import("../views/GTA.vue")),
      meta: {
        name: "GTA"
      }
    },
    {
      path: "/gta/natives",
      name: "Natives",
      component: Natives,
      meta: {
        name: "GTANatives",
      },
    },
    {
      path: '/gta/natives/:hash',
      name: 'Native',
      component: defineAsyncComponent(() =>  import("../views/DetailedNative.vue")),
      meta: {
        name: "DetailedNative"
      }
    },
    {
      path: "/:pathMatch(.*)*",
      name: "Page not found!",
      component: defineAsyncComponent(() =>  import("../views/NotFound.vue")),
      meta: {
        name: "NotFound",
      },
    },
  ],
  history: createWebHistory(),
});

I appreciate any help.

EDIT: So I found out when this happens. So basically if there are more than two routes for example /gta/native or simply /a/b this error appears even if the page doesn't exist. But I still can't figure out how and why.


Solution

  • So I found the answer somehow. Everything was caused because I had a "corrupted" vite.config.ts. After removing base: './', everything worked flawlessly.