Lazy loading routes don't work in generated build

[husayt]

Describe the bug

Routes stop working in generated bundle when I use dynamically imported (async) route components (in dev all works fine):

export const routes =   [
     { path: "/", component: "Home" },
     { path: "/about", component: "About" }
  ].map(({ path, component, meta }) => ({
     path,
     component: () => import(`./views/${component}.vue`)
   }))

Reproduction

Reproduction Repo: https://github.com/husayt/vite-tailwind-starter

Reproduction step

yarn build
yarn servestatic

When i go to localhost:8080 I get this error in the console:

index.d91b05ae.js:1 GET http://localhost:8080/_assets/views/Home.vue net::ERR_ABORTED 404 (Not Found)

Same with /about. So routes don't work, although they work fine with yarn dev

System Info

• required vite version: 0.20.2
• required Operating System: Windows 10
• required Node version: 14.3
• Optional:
  • npm/yarn version yarn 1.22.4

Detailed description

Routes work fine in the original project from this repo where pages imported statically.

import Home from './views/Home.vue'
import About from './views/About.vue'
import NotFound from './views/NotFound.vue'

/** @type {import('vue-router').RouterOptions['routes']} */
export let routes = [
  { path: '/', component: Home, meta: { title: 'Home' } },
  { path: '/about', component: About, meta: { title: 'About' } },
  { path: '/:path(.*)', component: NotFound },
]

But once I change routes to dynamic import, they stop working in generated bundle (dev still works fine)

const list = [
  { path: "/", component: "Home", meta: { title: "Home" } },
  { path: "/about", component: "About" },
  { path: "/:path(.*)", component: "NotFound" },
]


/** @type {import('vue-router').RouterOptions['routes']} */
export const routes = list.map(({ path, component, meta }) => ({
  path,
  component: () => import(`./views/${component}.vue`),
  meta: meta || { title: component },
}))

[ChrisRu]

This currently seems to be a limitation of esbuild.

[husayt]

I see, but this is such an important case it will be good to have some kind of workaround. Technically routes are known, so build tool can process them and add tree shakable dynamically loaded chunks.

[yyx990803]

Full dynamic import path imports are currently untouched during build, because Rollup doesn't provide default handling for it.

[husayt]

@yyx990803 Is there any alternative syntax to use, until esbuild starts to support this?

[csr632]

@husayt In 0.20.3 vite use rollup-plugin-dynamic-import-variables, so it should works.

[husayt]

Actually indeed it does work now. Thanks @yyx990803