23

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

  • 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
  • Webpack issue?

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.

Improve this question
11
  • 3
    Can you share your projects repo? I have several guesses but it would help a lot to just have a look Commented Mar 11, 2020 at 20:28
  • 1
    It sounds like you've done your research, but I don't think this can be solved on S/O without providing more code - or all of it - unless a miracle occurs. I'd recommend filing an issue on Vue's github page and including the webpack config (or at least relevant snippets). Another option is to fork your repo, delete stuff until you have a MRE (stackoverflow.com/help/minimal-reproducible-example), and then share the entire repo from github or another open source repo. Commented Mar 12, 2020 at 19:13
  • 1
    Unless you can provide a minimal reproducible example, it's unlikely this question will get a solid answer, especially since this is a very specific case. Commented Mar 14, 2020 at 2:18
  • 1
    @DouglasGaskell I'll assume you have already fixed it, but I was having the same error in my environment (I'm also using TS with class-component) and, in my case, it turned out to be a circular dependency issue. After the HMR happened, it could resolve the dependencies successfully, but not before then. I had component A using B which used A (a nested editor in a modal). If someone else is having the same error and doesn't know why, check for it. Commented Jun 5, 2020 at 23:47
  • 2
    @ThiagoSilveira is on the correct path, circular references where the problem in my case Commented Aug 3, 2020 at 9:06

1 Answer 1

Reset to default
1

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')
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.