Vuepress: Unknown Custom Element - <v-#####>

[bretterer]

• [x] I confirm that this is a issue rather than a question.

Bug report

During development, we created a component that went through each index.md file in a folder based on the this.$site.pages.path list. After upgrading to 1.0.0-alpha.30 to fix a few other issues we were having, It no longer works.

Component code:

<template>
  <div>
    <Content v-for="page in changelogPages" :key="page.key" :pageKey="page.key"/>
  </div>
</template>

<script>
import _ from "lodash"
export default {
  computed: {
    changelogPages: function () {
      let pages = this.$site.pages
        .filter(pages => pages.path.startsWith("/docs/change-log/2"))

      return _.orderBy(pages, 'path').reverse()
    }
  },
  data: function () {
    return {}
  }
}

</script>

This results in the following errors.

looking at the Vue plugin for chrome, I can see that the page.key is there.

In the page, I am simply calling <ChangeLogList /> which invokes the above global-component.

Reference Links in repo

Global Component : https://github.com/okta/okta.github.io/blob/VuePress/packages/%40okta/vuepress-theme-default/global-components/ChangeLogList.vue

Component invoking ChangeLogList:https://github.com/okta/okta.github.io/blob/VuePress/packages/%40okta/vuepress-theme-default/components/ChangeLog.vue

Page that is uisng ChangeLog (View Raw): https://github.com/okta/okta.github.io/blob/VuePress/packages/%40okta/vuepress-site/docs/change-log/index.md

Version

1.0.0-alpha.30

Steps to reproduce

See Repo (and branch VuePress) https://github.com/okta/okta.github.io/tree/VuePress

What is expected?

Display inline the content of each changelog file

What is actually happening?

Throwing console errors

Other relevant information

• Your OS: Mac OS
• Node.js version: 11.6.0
• Browser version: 71.0.3578.98
• Is this a global or local install? Local
• Which package manager did you use for the install? Yarn

[cietho]

Hi @bretterer,
did you try this.$site.pages.regularPath instead of this.$site.pages.path. This works for me :)

[bretterer]

@cietho same issue. I am getting the correct key for the page, so I don't think that is the issue? Have you tried it with the linked code above?

[bretterer]

@ulivz @yyx990803 Trying to get some attention on this. It seems to have regressed into a broken version of being able to use pageKey

This is preventing a major part of our new site being built. Any way to get some attention to this bug? I am not sure if this was caused by the changes inside of VuePress, or if this is actually vue.js related.

[meteorlxy]

Suggest to test in the newest version and update the issue.

cc @Shigma and you will get quicker response.

[ulivz]

@bretterer If you want others to help you, please follow the issue guidelines, and create a minimal and valid repro repo since it's so large for me to clone.

[meteorlxy]

I found a similar issue related to this.

The cause is that we do not register all the layout-components and page-components autoly. Only when we are trying to enter the corresponding route will we register the component via ensureAsyncComponentsLoaded.

https://github.com/vuejs/vuepress/blob/760a05e7faa628afb365082c34a786f9eb25b90b/packages/%40vuepress/core/lib/internal-plugins/routes.js#L47

So if you are using <Content v-for="page in changelogPages"/> in the same page / route, the page components are not registered.

[bretterer]

@ulivz @meteorlxy @Shigma

Reproduction Repo added.

https://github.com/bretterer/VuePress-bug-1173

Just run the yarn install and yarn dev command and you will see the error

[meteorlxy]

@bretterer This will be fixed if #1402 is merged

[davision]

I just stumble upon the same issue. I'm running version 1.0.0-alpha.42. As a consequence, the links from sidebar doesn't load the page. It appears only after the page is refreshed. Any quick fix I can make?

[meteorlxy]

@davision

A quick fix for this issue in enhanceApp.js (for 1.0.0-alpha.42):

import pageComponents from '@internal/page-components'

export default ({ Vue }) => {
  for (const [name, component] of Object.entries(pageComponents)) {
    Vue.component(name, component)
  }
}

This will (I think) fix all similar issues with Unknown Custom Element - <v-#####>, as we have already registered all the <v-#####> components.

What's more, all these components are async components, so you might not worry much about the registeration.

[davision]

Awesome, that worked as a cham. I figured out that this issue only happens when using custom components. Which this enhancement fixes. Thank you very much!

[ulivz]

The workaround from @meteorlxy isn't a good idea.

The page component should be registered ONLY when they are used, otherwise and you’ll be switched to a new page even if your content of asynchronous page has not been loaded - this experience is too strange, besides, the current state of nprogress is wrong.

[ulivz]

Accurately fixed at 9d0151483b330f7931d46ed9ad4c501e7e47d289 and out at 1.0.0-alpha.43.

[davision]

Hmm, looks like not really or I'm having different problem with this issue. I'm still getting an error, when I'm using a custom vue component, on index.md, and click to another link: Unknown custom element: <v-88235c4e>

[ITsolution-git]

Is there any upadate on this issue please?
@davision were you able to fix that problem? It loads properly on first reload, but when I click on another page, it just gives me the same error.

[davision]

Hey, looks like it is solved for me yes with hack from @meteorlxy. Even running the latest alpha version should work fine.

[antonreshetov]

Same error in 1.0.0-alpha.48
@meteorlxy thanks for solution!

[justin-schroeder]

I'm on 1.2.0 and still experiencing this issue, but the @meteorlxy works for me. I realize it's not ideal, but I don't see another alternative at this point?

[tianjianchn]

@justin-schroeder Same as me, 1.2.0 and @meteorlxy 's hacking enhanceApp.js working. After dig it, I find that if changing https://github.com/vuejs/vuepress/blob/7d6e420eb42112c7c997090b4bffd20268d3bf4a/packages/%40vuepress/core/lib/client/components/Content.js#L24-L26
return h(pageKey) -> return h(Vue.component(pageKey)), all will be fine without the hacking above. Hope that can help some.

[meteorlxy]

@justin-schroeder @tianjianchn

What about creating a new issue to report / suggest that?

Providing a reproduction repo could help a lot.

[psi-4ward]

Indeed, same here

[zhixinpeng]

same here, 1.2.0

[meteorlxy]

In current version, the cause of Unknown Custom Element - <v-#####> could be different from the original issue.

If anyone still meet with this problem, please open another issue and provide the reproduction steps / repo.