After using vue-router, there is an error in packaging and running # Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

[reaink]

#93 Describe the bug

After using vue-router and build, there will be errors when and run in nginx.

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

Tried Nginx to add type information to js files but the same error still occurs

System Info

• required vite version: 1.0.0-rc.4
• required Operating System: Linux
• required Node version:v12.16.3
• Optional:
  • npm/yarn version 6.14.4
  • Installed vue version (from yarn.lock or package-lock.json) 3.0.0
  • Installed @vue/compiler-sfc version 3.0.0

[reaink]

Visiting any .vue page will correspond to index.html

[underfin]

Can you give a reproduction? It looked very weird.This should hasn't Home.vue request after build.

[reaink]

@underfin

I found the problem

Encapsulating defineAsyncComponent as a function will cause the component to not be read, so there is no abnormality when developing, but the vue file will not be packaged when packaging

The error is

function loadView(view) {
  return defineAsyncComponent(() => import(`../views/${view}.vue`));
}

routes: [
    {
      path: "/",
      name: "Home",
      component: loadView('Home')
    }
]

This will cause the corresponding vue file to not be packaged when packaging

[reaink]

@underfin Thank you!

[MatthiasGrandl]

@nshusr hey can you tell me how you solved this? Does defineAsyncComponent work at all for you? I don't have it encapsulated in a function like in your example and I get the same error.

[MatthiasGrandl]

Oh nevermind, I guess a loop around it causes the same problem.

[reaink]

@MatthiasGrandl

Write each route import separately and it will work fine

It seems that the imported components cannot be written as functions yet

can use

routes: [
    {
      path: "/",
      name: "Home",
      component: defineAsyncComponent(() => import('../views/Home.vue'));
    },
    {
      path: "/about",
      name: "About",
      component: defineAsyncComponent(() => import('../views/About.vue'));
    }
]

[MatthiasGrandl]

@nshusr yeah figured it out. thanks though!