CODEWITHSUNDEEP
javascripttypescriptvue.jswebpackvuetify.js
Douglas Gaskell
Douglas Gaskell

Reputation: 10050

Vue.js: inconsistent "Unknown Custom Element" that's resolved on a HMR

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 (Now several). This only seems to occur if I reload the page, and will start working correctly if I prompt the dev server to a hot module reload (HMR) (Ie. changing something in the template and saving the file).

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

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, and may or may not occur with the same components depending on where in the app they are used, which seems non-sensible to me.

For instance, I have a FileSystemTree, FileSystemToolbar, & FileSystemMainView components. If I use these in a view FileSystemView it works as expected. If I create a FileSystem, component in the same directory as the above three, so it's reusable, I start getting the error even if it's a copy/paste of the code from FileSystemView.

Example of limited workaround

If I move FileSystem up one directory, and change the imports to the subdir (Has an index.ts) instead of . the problem vanishes. But if I move it back down to the same directory as the components it's importing, the problem comes back.

Upvotes: 23

Views: 1827

Answers (1)

Ken Chapple
Ken Chapple

Reputation: 11

If this issue appears to happen inconsistently, and your program works as-expected after a hot-reload, but not after refreshing, you may be registering your component after Vue initialization. Here is an example of incorrect and correct global component registration from of the vue-js-modal from main.js.

For example (incorrect):

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

import VModal from "vue-js-modal";
Vue.use(VModal)

Should be:

import Vue from 'vue'
import App from './App.vue'
import VModal from "vue-js-modal";
Vue.use(VModal)
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Upvotes: 1

Related Questions