{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/vue/issues/7835","repository_url":"https://api.github.com/repos/vuejs/vue","labels_url":"https://api.github.com/repos/vuejs/vue/issues/7835/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/vue/issues/7835/comments","events_url":"https://api.github.com/repos/vuejs/vue/issues/7835/events","html_url":"https://github.com/vuejs/vue/issues/7835","id":305541922,"number":7835,"title":"Unknown custom element warning with recursive components, babel","user":{"login":"adam-cowley","id":1372869,"avatar_url":"https://avatars3.githubusercontent.com/u/1372869?v=4","gravatar_id":"","url":"https://api.github.com/users/adam-cowley","html_url":"https://github.com/adam-cowley","followers_url":"https://api.github.com/users/adam-cowley/followers","following_url":"https://api.github.com/users/adam-cowley/following{/other_user}","gists_url":"https://api.github.com/users/adam-cowley/gists{/gist_id}","starred_url":"https://api.github.com/users/adam-cowley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adam-cowley/subscriptions","organizations_url":"https://api.github.com/users/adam-cowley/orgs","repos_url":"https://api.github.com/users/adam-cowley/repos","events_url":"https://api.github.com/users/adam-cowley/events{/privacy}","received_events_url":"https://api.github.com/users/adam-cowley/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-03-15T12:57:06Z","updated_at":"2018-03-15T15:16:43Z","closed_at":"2018-03-15T15:16:43Z","author_association":"NONE","body":"### Version\r\n2.5.2\r\n\r\n### Reproduction link\r\n[https://github.com/adam-cowley/nestedtest](https://github.com/adam-cowley/nestedtest)\r\n\r\n### Steps to reproduce\r\nThe repo is based on the webpack template.  Run `npm run dev` to start the project.\r\n\r\n### What is expected?\r\nI am attempting to reuse components in a nested pattern. The EntityComponent should render a RelationshipComponent which should in turn render an EntityComponent.  \r\n\r\n### What is actually happening?\r\nAlthough each component is defined with a name property, I receive the following warning in the console and nothing rendered on the page.\r\n\r\n```Unknown custom element: <EntityComponent> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.```\r\n\r\nIf I make a change to the EntityComponent file, it will hot swap in the component which will render without a warning.\r\n\r\nI've tried in vain to set keys and a name property on the child element and rename the element.  Attempting to alias the component name has also proved unsuccessful.\r\n\r\nRemoving the component means the rest of the component appears correctly.\r\n\r\n---\r\nThis is a barebones reproduction but the final version uses vuex for state management.  Each child component has a `reference` property passed through it, then a getter is used to pull the information for that specific reference from an array in the store.  Using 'v-for' on a div will list the relevant array entries so this part works.  It seems that the name property is being ignored for the nested component.\r\n\r\nI'm struggling to find any documentation on this - possibly due to using the wrong keywords?  I'm happy to write a blog post if/when this gets resolved to give others a helping hand.\r\n\r\n<!-- generated by vue-issues. DO NOT REMOVE -->"},"comment":{"url":"https://api.github.com/repos/vuejs/vue/issues/comments/373412331","html_url":"https://github.com/vuejs/vue/issues/7835#issuecomment-373412331","issue_url":"https://api.github.com/repos/vuejs/vue/issues/7835","id":373412331,"user":{"login":"adam-cowley","id":1372869,"avatar_url":"https://avatars3.githubusercontent.com/u/1372869?v=4","gravatar_id":"","url":"https://api.github.com/users/adam-cowley","html_url":"https://github.com/adam-cowley","followers_url":"https://api.github.com/users/adam-cowley/followers","following_url":"https://api.github.com/users/adam-cowley/following{/other_user}","gists_url":"https://api.github.com/users/adam-cowley/gists{/gist_id}","starred_url":"https://api.github.com/users/adam-cowley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/adam-cowley/subscriptions","organizations_url":"https://api.github.com/users/adam-cowley/orgs","repos_url":"https://api.github.com/users/adam-cowley/repos","events_url":"https://api.github.com/users/adam-cowley/events{/privacy}","received_events_url":"https://api.github.com/users/adam-cowley/received_events","type":"User","site_admin":false},"created_at":"2018-03-15T15:16:43Z","updated_at":"2018-03-15T15:16:43Z","author_association":"NONE","body":"This looks about right (if not a little unintuitive).  I must have got frustrated further up the document.  I've put the following in main.js and everything is right with the world again.\r\n\r\n```js\r\nimport EntityComponent from '@/components/retrieve/EntityComponent'\r\nimport RelationshipComponent from '@/components/retrieve/RelationshipComponent'\r\n\r\nVue.component('EntityComponent', EntityComponent)\r\nVue.component('RelationshipComponent', RelationshipComponent)\r\n```\r\n\r\nThanks for the pointer @posva "}}
{"actor":{"display_login":"adam-cowley"}}