TypeError: Cannot read property 'components' of undefined in Vue2

Question

I'm using mixins in the subset components of app.vue without any problems, everything is good and works fine, but when I want to use it into the app.vue component, i'm having error in console.

<script>
/* eslint-disable */
import PanelUser from "./layouts/PanelUser";
import Auth from "./mixins/Auth";
export default {
  name: "App",
  mixins: [Auth],
  components: {
    PanelUser
  },
};
</script>

I also can not use the router; when I use it, the page is completely white and nothing is displayed.

Answer 1

I have found how to check this situation.

First, you could see that the error threw at checkComponents method, move your mouse on and left click.

Second, add a break point, and then refresh the page.

Third, maybe you could find that some mixins or components which are referenced show undefined. In my case, the second mixin is undefind.

Finally, check the reference or the mixin file. I found the reason is that I copied the mixin from another file and forgot to rename the mixin at declare part.

That's all, try to check by yourself. :)