ssrBuild with async Vue3 components / routes , trouble with import to require conversion in built files.

[tbgse]

Describe the bug

I've been spending some time with the mostly undocumented ssrBuild feature of Vite + Vue3, so this might not actually be a bug but working as intended and i might be doing something wrong.

I am trying to run the ssrBuild with a router that defines some async components as below:

export default function (type) {
  const routerHistory = type === 'client' ? createWebHistory() : createMemoryHistory();
  
  return createRouter({
    history: routerHistory,
    routes: [
      { path: '/', component: Home, props: true },
      { path: '/a', component: () => import('./components/PageA.vue'), props: true },
      { path: '/b', component: () => import('./components/PageB.vue'), props: true },
    ]
  });
}

However, once i built my entry files with ssrBuild it converts the router part in the entry file to:

function createRouter$1(type) {
  const routerHistory = type === "client" ? createWebHistory() : createMemoryHistory();
  return createRouter({
    history: routerHistory,
    routes: [
      {path: "/", component: script$2, props: true},
      {path: "/a", component: () => Promise.resolve().then(function() {
        return require("./PageA.161ddab2.js");
      }).default, props: true},
      {path: "/b", component: () => Promise.resolve().then(function() {
        return require("./PageB.f65a13cd.js");
      }).default, props: true}
    ]
  });
}

The problem here is how the requires are defined:

 return require("./PageA.161ddab2.js");

The above code does end up not being able to find the component. If i manually go into the built files and add a .default behind this, the code works fine and my pages load / hydrate correctly.

 return require("./PageA.161ddab2.js").default;

since the exported pages all have default exports, this seems to be logical. E.g. in PageA:

"use strict";
var renderer = require("@vue/server-renderer");
var script = {
  name: "PageA",
  props: {
    msg: String
  },
  data() {
    return {
      randomNumber: 0,
      initialized: false,
      count: 0
    };
  }
};
function ssrRender(_ctx, _push, _parent, _attrs, $props, $setup, $data, $options) {
  _push(`<h1${renderer.ssrRenderAttrs(_attrs)}>I AM PAGE A</h1>`);
}
script.ssrRender = ssrRender;
script.__file = "src/components/PageA.vue";
exports.default = script;

Is this actually a bug with vite where it should be adding the .default to the required components? Am I doing something wrong here and should i define my imports differently? Happy to provide additional info if needed.

System Info

• required vite version: ^1.0.0-rc.4
• required Operating System: win10 with WSL1
• required Node version: v14.7.0

[antfu]

Related to #720

[underfin]

For async component, you should use defineAsyncComponent wrapper it.The rfc is here https://github.com/vuejs/rfcs/blob/async-component/active-rfcs/0026-async-component-api.md

[tbgse]

@underfin I tried the same code with defineAsyncComponent, it does not change the way the code is compiled and has the same problem with how import is converted to a require that lacks the default part of the import.

[underfin]

The compiled behavior is correct, defineAsyncComponent will handle default of module.

[tbgse]

@underfin this does not seem to be the case, i might be doing something wrong?
Here is my router:

export default function (type) {
  const routerHistory = type === 'client' ? createWebHistory() : createMemoryHistory();

  return createRouter({
    history: routerHistory,
    routes: [
      { path: '/', component: Home, props: true },
      { path: '/a', component: defineAsyncComponent(() => import("./components/PageA.vue")), props: true },
      { path: '/b', component: defineAsyncComponent(() => import("./components/PageB.vue")), props: true },
    ]
  });
}

which is being compiled to:

function createRouter$1(type) {
  const routerHistory = type === "client" ? createWebHistory() : createMemoryHistory();
  return createRouter({
    history: routerHistory,
    routes: [
      {path: "/", component: script$2, props: true},
      {path: "/a", component: vue.defineAsyncComponent(() => Promise.resolve().then(function() {
        return require("./PageA.161ddab2.js");
      })), props: true},
      {path: "/b", component: vue.defineAsyncComponent(() => Promise.resolve().then(function() {
        return require("./PageB.f65a13cd.js");
      })), props: true}
    ]
  });
}

When running the server, i'm getting a warning and the page components do not render.

[Vue warn]: Component  is missing template or render function.

However, when i change return require("./PageB.f65a13cd.js"); to return require("./PageB.f65a13cd.js").default; everything works as expected. This is with the following versions of vue:

"vue": "^3.0.0-rc.9",
"@vue/compiler-sfc": "^3.0.0-rc.9",
"@vue/server-renderer": "^3.0.0-rc.9",

[underfin]

Can you provider your repo for me track this?

[tbgse]

@underfin yes, i just set this up https://github.com/tbgse/vite-ssr-example

it's super basic, so i completely ignore hydration etc. in this example. But just by running npm run build and after that npm run serve you should be able to see the errors with the components not being found. Thanks for taking the time to look into this. You should be able to find the issue with the router in the build files (index.js) around line 1454. If you add .default to those requires and run npm run serve again, it will then correctly render the routes.

[underfin]

I try fix it,it is a bug with vue core. You can track here vuejs/core#2034

[tbgse]

Awesome @underfin I'll keep a close eye on the PR in vue core.

[posva]

You shouldn't use defineAsyncComponent with the router views, it's not necessary as they are resolved by the router navigation guards. So this is likely a bug in vue router missing some handling in the extractComponentsGuards function. It's handling it the same way as the previous vue-router, so it's weird. If someone could open an issue on vue-router-next with a boiled down repro, that would hepl

[tbgse]

thanks for jumping in on this @posva with so many moving pieces (router, vue, vite) it was really hard for me to pinpoint where things were going wrong here. I posted a very minimal setup of the repo here: https://github.com/tbgse/vite-ssr-example and just updated it by removing defineAsyncComponent, so you can use it to reproduce the issue and debug the router.

Again this is only a problem when building in vite ssr mode. When you simply build for the client, everything works as expected.