Vue warn: Unknown custom element: <myCompont> - did you register the component correctly?

Question

I'm a freshman, when i use use custom components, it gives me this error:

Vue warn: Unknown custom element: - did you register the component correctly?

The ModalBase compontent used in the components NoticeModal.vue and NoticeModal compontent used in the productInfo.vue .

I'm sure I had correctly import NoticeModal in productInfo.vue and also import ModalBase.vue in NoticeModal.vue , and all registerd.

But I get the only warn: Unknown custom element: <modal-base>

Here is ModalBase.vue :

<template>
  <div>
    <div class="modal-header">
      <slot name="header">
        <p class="title">This is base</p>
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: "ModalBase",
  data() {
    return {show: ''}
  }
}
</script>

Here is NoticeModal.vue :

<template>
  <div class="noticeModal">
    <modal-base>
      <div slot="header">hello</div>
    </modal-base>
  </div>
</template>
<script>
import {ModalBase} from '@/components/index';
    
export default {
  name: "NoticeModal",
  props: ['modalOptions'],
  components: {
    ModalBase
  },
  data() {
    return {show: ''}
  }
}
</script>

And here is productInfo.vue :

<template>
  <div>
    <notice-modal></notice-modal>
  </div>
</template>
<script>
import {NoticeModal} from '@/components/index';
    
export default {
  name: "productInfo",
  components: {
    'NoticeModal': NoticeModal
  },
  data() { }
}
</script>

By the way this path '@/components/index' is right, both NoticeModal and ModalBase had imported and registered and exported correctly in this file.

And in @/components/index :

import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
import ModalBase from '@/components/componentsFile/ModalBase.vue'
    
export {
  NoticeModal,
  ModalBase
}

Answer 1

components: {
        'NoticeModal': NoticeModal
},

These lines means you've registered a component named 'NoticeModel'. So in your template code, you should use this component with "NoticeModel" as html tag.

<template>
    <div>
        <NoticeModel></NoticeModel>
    </div>
</template>

Also you could use following code to register a HTML style tag and use it with notice-modal

components: {
    'notice-modal': NoticeModal
}

Answer 2

Another reason you can get this error. You have two files with same name and different extensions

like : MyComponent.vue and MyComponent.js in same folder.

In my MyComponent.js I added a name to solve this error. export const componentWorker = { hello: (p1) => {console.log('hello from (JS) ' , p1)}, name: "JSCompWorker" } This don't always happen - I have other samename.vue and samename.js in one folder, and no problem...

Answer 3

You should import your component directly. for example:

instead of

import {ModalBase} from '@/components/index';

put

import ModalBase from '@/components/ModalBase.vue';