Dynamic imports doesn't work in dev:SSR mode

[cipami]

This works:

setup() {
   const component = defineAsyncComponent(() => import(`../HelloWorld.vue`));
   return { component }; 
}

This doesn't

setup() {
    const name = "HelloWorld";
    const component = defineAsyncComponent(() => import(`../${name}.vue`));
    return { component };
}

Error:

Error: failed to load module for ssr: ../HelloWorld.vue
    at instantiateModule (C:\Projects\vite-ssr\node_modules\vite\dist\node\chunks\dep-2c03f3f9.js:69022:15)

It works when u first load another page then navigate over VueRouter / Dev:SPA also build seems to work.

[frandiox]

@MichalCipa Woops, somehow I missed this issue.

I think Vite 2 doesn't like that kind of import anymore. I believe it used to work in Vite 1 but in the current version I think you need to use Vite's glob import: https://vitejs.dev/guide/features.html#glob-import

If you do that and save the resulting object somewhere, then I think you can import the components later by finding the key that matches your filepath in that object. I'm doing something similar here: https://github.com/frandiox/vite-ssr/blob/master/examples/react/src/routes.jsx#L6

[cipami]

@frandiox Hi! somehow it started to work on latest version. But this info is very helpful as well. Thanks!