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

[bretterer]

• 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.

vuepress/packages/@vuepress/core/lib/internal-plugins/routes.js

Line 47 in 760a05e

ensureAsyncComponentsLoaded(${JSON.stringify(layout || 'Layout')}, ${JSON.stringify(componentName)}).then(next)

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!