Struggling to access a specific route in Express, I keep encountering an error in my browser. Additionally, when the Vue application is built, only the Home page and the 404 page seem to work properly, while the rest display a default empty HTML layout.
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.The Express code snippet causing the issue:
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 the router.ts file in Vue, you can find this piece of 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(),
});
Your assistance is greatly appreciated.
EDIT: After some investigation, it seems that the error occurs when there are more than two routes defined, such as /gta/native or /a/b, triggering the issue even if those pages do not exist. However, the exact cause remains elusive to me.