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.

Georgy

I think your router,js has problem , – Decaffeinate

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. :)

Tutuila

I would like to point out this response as a good example of helpful and instructional. Thank you for taking the time to write out this response. – Borders

Answer 2

You need to change:

import PanelUser from "./layouts/PanelUser";

To

import {PanelUser} from "./layouts/PanelUser";

And

import Auth from "./mixins/Auth";

To

import {Auth} from "./mixins/Auth";

Chamkis

Answer 3

The error is mixin related.

Make sure your mixins being used in your components are correct. (eg. name, esm import path etc.)

import samplePackage from "sample-package";
import anotherMixin from "another-package/path/to/mixin";

export default {
    mixins: [
        samplePackage.sampleMixin,
        anotherMixin
    ]
}

Archduchess

Answer 4

After a couple hours of debugging, I found in our case the culprit was vuelidate. We tried to migrate from Webpack to Vite, keeping Vue 2.7, and vuelidate 3.

Importing:

import { validationMixin } from 'vuelidate'
console.log(validationMixin // undefined in production build

printed only undefined after a vite build

After reading about issues related to non-ESM imports (#1, #2) I tried to change the import to vuelidate/src:

import { validationMixin } from 'vuelidate/src/index'
console.log(validationMixin) // works!

// import the validators from "lib" though, src threw an require-js error for me
import { required, email, minLength } from "vuelidate/lib/validators"

Hulse