render function or template not defined in component: anonymous about router-module

[Atinux]

Hi, this is a bug from vue-router that does not handle the export default with lazy importing.

You have to update

component: () => require("@/pages/index.vue")

to

component: () => import("@/pages/index.vue").then((m) => m.default || m)

And this for each component you will import.

[mathieutu]

@Atinux I didn't see this issue anywhere in vue-router repo, and actually it works well with a vue-cli project: https://codesandbox.io/s/vue-router-example-forked-ofico?file=/src/router/index.js

Could it be nuxt related?

Thanks.

[mathieutu]

Hi guys @posva @Atinux, I still have the issue on a brand new project.

I've tried with this route, which is the standard SFC nuxt index page:

const isESModule = obj => obj.__esModule || (hasSymbol && obj[Symbol.toStringTag] === 'Module')

import('./pages/index.vue').then((comp) => console.log(isESModule(comp), comp))

The console.log gives true Object { default: VueComponent(options), … }, so it seems to be quite standard. The component is a an ESModule, so I don't understand why it doesn't get the default like it should.

I'm trying to debug it and investigate to fix it, but if you have any clues, I'm taking them with pleasure.

Thanks

---

EDIT 1:
We do not enter in the condition here, as the def is a VueComponent function, and has a cid, so the

if (isESModule(resolvedDef)) {
  resolvedDef = resolvedDef.default;
}

isn't executed.

[luminous8]

Same error on my side. Works fine on another Nuxt project

[mrleblanc101]

Any news on this ? This error has been reported 2 years ago.
If this is the only (and intended) solution. This should be documented, no ?

[Atinux]

I thought vue-router fixed it in one of the last release, cc @posva

[posva]

The check for ES Modules has been the same for around 3 years I think, and the relevant code is located at https://github.com/vuejs/vue-router-next/blob/master/src/utils/index.ts#L7 or https://github.com/vuejs/vue-router/blob/f597959b14887cf0535aa895b6325a2f9348c5cf/src/util/resolve-components.js#L95 (v4 and v3)

Usually, these objects are generated and if they are not generated properly you will have to add the workaround mentioned #82 (comment)

[mathieutu]

Usually, these objects are generated

So, may it be something about an issue with nuxt webpack build @Atinux? Because here, there is nothing more than just importing classic vue component. (Could we so reopen the issue?)

@posva For my knowledge, why not use a standard interropDefault in vue-router instead of this module thing?