javascript - Unknown custom element - did you register the component correctly? - Stack Overflow

admin管理员组

文章数量:1345447

I'm currently using webpack with vuejs 2. I have a very basic ponent [Main.vue] that is rendered by vue-router and inside this ponent, I want to have another one [Information.vue]. For some reason, I can't render it properly.

ponents/test/Information.vue

<template>
    <div>
    TEST
    </div>
</template>

<script>
export default {
  name: 'information',
  props: {
    bleh: {
      type: Object,
      required: true
    }
  }
}
</script>

ponents/test/injex.js

export { default as Main } from './Main'
export { default as Information } from './Information'

ponents/test/Main.vue

<template>
    <information :bleh="{}" />
</template>

<script>
import { Information } from 'ponents/test'
export default {
  name: 'main',
  ponents: { Information  }
}
</script>

Any idea why I get the following error ?

[Vue warn]: Unknown custom element: <information> - did you register
the ponent correctly? For recursive ponents, make sure to
provide the "name" option

I'm currently using webpack with vuejs 2. I have a very basic ponent [Main.vue] that is rendered by vue-router and inside this ponent, I want to have another one [Information.vue]. For some reason, I can't render it properly.

ponents/test/Information.vue

<template>
    <div>
    TEST
    </div>
</template>

<script>
export default {
  name: 'information',
  props: {
    bleh: {
      type: Object,
      required: true
    }
  }
}
</script>

ponents/test/injex.js

export { default as Main } from './Main'
export { default as Information } from './Information'

ponents/test/Main.vue

<template>
    <information :bleh="{}" />
</template>

<script>
import { Information } from 'ponents/test'
export default {
  name: 'main',
  ponents: { Information  }
}
</script>

Any idea why I get the following error ?

[Vue warn]: Unknown custom element: <information> - did you register
the ponent correctly? For recursive ponents, make sure to
provide the "name" option

• javascript
• vuejs2
• ecmascript-5

Share Improve this question Follow asked Apr 12, 2017 at 19:46 Gabriel RobertGabriel Robert 3,08022 gold badges2020 silver badges3737 bronze badges 3

• Is Information what you think it is? Do you see a vue ponent on console.log(Information) right after import { Information } from 'ponents/test'? – Amresh Venugopal Commented Apr 12, 2017 at 19:59
• @AmreshVenugopal Yes, I can console.log the ponent and actually see props. Also, doing this make the render possible. If I do not console.log(Information), the error is thrown. – Gabriel Robert Commented Apr 12, 2017 at 20:08
• 1 You should do - import { information } from 'ponents/test' – Pradeepb Commented Apr 13, 2017 at 22:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

This is really old question but answering so that future visitors might get help:

Custom element shouldn't be self closed:

<information :bleh="{}" />

Make sure to use like this:

<information :bleh="{}"></information>

Thanks to @connexo for the ment:

Also for pliance with official web ponents, make sure you use a dashed tag like <information-ponent ...></information-ponent>

For those who get error with the following:

Did you register the ponent correctly?

Make sure to apply the name option in your ponent

Try register ponent directly. I fixed my one by this.

Vue.ponent('Information', Information)

本文标签： javascriptUnknown custom elementdid you register the component correctlyStack Overflow