Vue: Cannot resolve: "Unknown custom element"

[Pistos]

Version

2.5.2

Reproduction link

https://github.com/Pistos/vue-unknown-custom-element-bug

Steps to reproduce

See README, but I duplicate the steps here for your convenience:

1. npm install
2. npm run dev
3. Browse to http://localhost:8080
4. Click "Example Tab" at top of page
5. Observe lack of second tabset on page
6. Observe console error: [Vue warn]: Unknown custom element: <tab-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
7. Open App.vue in an editor
8. Remove the three lines marked with comments; save file
9. Refresh example page in browser
10. Observe presence of expected tabset on page
11. Put three lines back in App.vue
12. Refresh browser
13. Observe disappearance of tabset

What is expected?

1. No JS console errors or warnings about components that seem to be correctly defined, imported, named and referenced.
2. Rendering of components (i.e. not missing)

What is actually happening?

1. JS console error: [Vue warn]: Unknown custom element: <tab-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
2. Component and its children are absent.

---

See the repro steps and README for a clue or workaround. This might have something to do with the usage of a child component twice on a page, but via different parent components.

[yyx990803]

You have a circular import cycle: ExampleTabs -> TabLink -> router -> Example -> ExampleTabs. Try to remove this cycle... use this.$router instead of importing the router instance.

[Pistos]

Yes, that was exactly the problem. Thank you!