vuepress: Unknown Custom Element -

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. screen shot 2019-01-07 at 5 39 58 pm

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

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 23 (13 by maintainers)

Commits related to this issue

Removes the need for Iframes in quickstart This registers all the components into Vue. This ia a temp fix until github.com/vuejs/vuepress/issues/1173 is patched — committed to okta/okta-developer-docs by bretterer 5 years ago
Removes the need for Iframes in quickstart This registers all the components into Vue. This ia a temp fix until github.com/vuejs/vuepress/issues/1173 is patched — committed to okta/okta-developer-docs by bretterer 5 years ago
Removes patch for un-loaded components, see github.com/vuejs/vuepress/issues/1173 — committed to okta/okta-developer-docs by bretterer 5 years ago
fix($core): '[Vue warn]: Unknown custom element' when using `<Content />` in a custom page without markdown (#1699) **Bug**: example, , will raise `[Vue warn]: Unknown custom element`, like #1173 #14... — committed to vuejs/vuepress by zthxxx 5 years ago
Fix error when switching pages (https://github.com/vuejs/vuepress/issues/1173#issuecomment-470534176) — committed to appsocially/upil-site by wallslide 5 years ago

Most upvoted comments

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

+18

meteorlxy on Mar 7, 2019

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>

davision on Mar 11, 2019

@justin-schroeder @tianjianchn

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

Providing a reproduction repo could help a lot.

meteorlxy on Nov 13, 2019

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

tianjianchn on Nov 13, 2019

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

davision on May 13, 2019

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

ulivz on Mar 9, 2019

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?

davision on Mar 7, 2019

@bretterer This will be fixed if #1402 is merged

meteorlxy on Mar 6, 2019