Vue: Cannot read property 'components' of undefined"

[Rolanddoda]

Version

2.5.15

Steps to reproduce

I am importing in App.vue a component named Profile.vue.In Profile.vue also i import another component named ChangePassword.vue.Everything it works and worked fine.

But now i dont want anymore to import ChangaPassword in Profile.vue component.But when i delete the import,delete the component registration and delete the html tag of ChangePassword component i got a strange error.

What is expected?

Expected this change to do not affect something in application and also to dont get error.

What is actually happening?

But i got the follow error.

Error in render: "TypeError: Cannot read property 'components' of undefined"

found in

---> at src\App.vue

vue.esm.js?efeb:1717 TypeError: Cannot read property 'components' of undefined
at checkComponents (vue.esm.js?efeb:1315)
at mergeOptions (vue.esm.js?efeb:1436)
at mergeOptions (vue.esm.js?efeb:1452)
at Function.Vue.extend (vue.esm.js?efeb:4733)
at createComponent (vue.esm.js?efeb:4135)
at _createElement (vue.esm.js?efeb:4363)
at createElement (vue.esm.js?efeb:4300)
at vm._c (vue.esm.js?efeb:4416)
at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-04c2046b","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/App.vue (app.js:1923), :50:27)
at VueComponent.Vue._render (vue.esm.js?efeb:4474)

---

I think that i miss something but since i delete the import in Profile.vue and delete the components: {} section and also the html tag related to ChangePassword.vue everything should work fine.Idk why it isnt

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.

[Rolanddoda]

But i think it is a bug

[posva]

For bugs you need to provide a minimal repro

[Rolanddoda]

But this bug occurs only in that situation.I cant do a repro.It is strange error.Anyway i am going to ask in the forum.

[Rolanddoda]

I solved it!If for someone gets the same error even if the code is right then make sure to have named your components.I named all my components and now i dont get this error again.

[fritx]

I met the same issue today, and after a long-time debugging, finally found the bug is from insistent filename (caseless) on git, which caused we mixin'd an undefined into a vue component.

https://stackoverflow.com/questions/17683458/how-do-i-commit-case-sensitive-only-filename-changes-in-git

[bestickley]

I encountered this error and what solved it was changing a line in my component from:
import getList from "../mixins.js" to import { getList } from "../mixins.js"

[sdzzlmz]

hi~,,would u mind show me exactly how you name them? I've been working on it for 2 days :（

[majorcool]

Another possible cause, your component depends on an non-existent mixin.

[jasonhartline]

I had the same error. It was from writing the incorrect:

import MixinName from './mixinfile'
Instead of the correct:

import { MixinName } from './mixinfile'
The comment above about 'non-existent mixin' from @majorcool was a good tip for finding this error.

[u2ros]

I also stumbled upon this and it is almost always a result of some sloppiness on our part. In my case i copy paste a mixin, and made a named export, which when imported under a different name, of course didn't exist. It is maybe a shame some undefined import alert doesn't pop up

[hybridwebdev]

I had the same error. It was from writing the incorrect:

import MixinName from './mixinfile'
Instead of the correct:

import { MixinName } from './mixinfile'
The comment above about 'non-existent mixin' from @majorcool was a good tip for finding this error.

Ran into this issue myself, and yup incorrect syntax when importing a mixin resulted in this issue.

Objectively, the error message displayed should be less ambiguous as it's really hard to decipher what it's referring to, nor does the stack trace provide any really useful context.

[herivgs]

I was having this error over Laravel 5.4 and vue 2.5

I just solved Changing the Mixin import line:
From:
import { MainMixin } from "./mixins/MainMixin";
To:
import MainMixin from "./mixins/MainMixin";

[hongquangraem]

I have the same isusse when mixing. My probem is naming the variable is minxin, so for the people later, do not name variable with special name

[marcelobbfonseca]

I had this issue by trying to import another js module to a mixin

[Taifunov]

I had same issue and the solving it's just in some of your components you didin't have decorator above export default class:
(delete the space between @ and component)
@ Component({
components : { }
})

you need just add empty decorator and issue will gone ;)

[okbuddy]

I had this issue by trying to import another js module to a mixin

same error , my bug is because of a error of circular dependency like this https://github.com/babel/babel/issues/4094#issuecomment-245410649
for example:

1. A.vue import the mixins.
2. mixins import the B.vue ( mixins export no mixin yet )
3. B.vue import { mixinA } from '../mixins' ( mixins still at the import step , export no mixin yet )
   so the mixinA is undefined in the B.vue
   add the break point at the import { mixinA } from '../mixins' will find the circular dependency.
   Solving the circular dependency will solve the error