#StackBounty: #javascript #typescript #vue.js #vuejs2 #vuetify.js Vue.js: inconsistent "Unknown Custom Element" that's re…

Bounty: 50

I am familiar with component registration. This is not the low-hanging fruit related to:

The Problem

When using the dev server I am experiencing an inconsistent “Unknown Custom Element” issue within one component. This only seems to occur if I reload the page, and will start working correctly if I prompt the dev server to to a hot module reload (HMR) (Ie. changing something in the template and saving the file).

  • Component: PropertyEditForm
  • Imported Component: ViewEditChip
  • ViewEditChip is used in other components without issue
  • I assign the component as expected in PropertyEditForm
    • components: {'view-edit-chip': ViewEditChip} (ts)
  • This issue goes away if I trigger a HMR, but always exists after a reload of the app

Error:

Unknown custom element: – did you register the component correctly? For recursive components, make sure to provide the “name” option.

Code

Remember this is TypeScript using class-component syntax

ViewEditChip declaration:

@Component({name: 'view-edit-chip'})

PropertyEditFormdeclaration:

@Component({
    name: 'property-edit-form',
    components: {
        'view-edit-chip': ViewEditChip
    }
})

PropertyEditFormtemplate usage:

<view-edit-chip :item.sync="item"></view-edit-chip>

Thoughts

  • I’m unsure if this is related to where it’s being used, or how it’s being used?
  • I doubt this is a problem related to the ViewEditChip itself, or it’s import as it’s used in many other places without problems.
    • In fact, most of the structure of PropertyEditForm is copy/pasted from other working components
  • This IS used with a Vuetify dialog if that has any effect here?

Additional Info

This is starting to occur with more and more components in my app. I do not know the cause, and cannot come up with a reproduction case. All of these errors occur only on a full reload of the site, and are fixed on an HMR, which seems non-sensible to me.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.