Uncaught (in promise) TypeError: Cannot read properties of undefined 오류

mixin에 선언되어 있는 공통 컴포넌트를 page에서 보여주려고 하니 위에 에러가 발생했다. 

선언되어 있는 공통 화면을 별로도 호출 하면서 생기는 문제 였는데 mixin에 호출 되어 있으면 자기 자신이 자기 자신을 호출하게 되는 문제가 발생하였다.  

 

vue를 사용함에 있어 

혹은 다른 프레임워크를 사용함에 있어서 

컴포넌트의 재사용성은 굉장히 중요하다. 

 

공통 컴포넌트를 만들어 놓고 

해당 컴포넌트를 호출만 한다면 개발의 시간을 단축 함과 동시에 

기능, 유닛 테스트도 편리 하여 공통 컴포넌트화 시켜서 여러 곳에서 사용하도록 개발하는 경우가 많이 생긴다. 

 

이런 경우에 modal 창이나 confirm 창, alert 창을 공통 컴포넌트고 만들고 . 

공통 컴포넌트가 동일한 부모, 혹은 자기 자신에서 호출 되는 경우에 에러가 발생하는 경우가 종종 있다. 

 

나는 호출하는 컴포넌트를 Mixin에서 제외하는 걸로 해결 했으나 

재귀 호출 하기 위해서 plugin/component.js 를 만들어 

별로의 컴포넌트를 아예 화면에 붙이면

자기 자신에서도 호출이 가능하고 

global하게 사용할 수 있다. (화면에서 import 하지 않아도 호출 가능)

 

component.js
..
import Vue from 'vue'

// vue-select
// 외부 라이브러리는 여러 화면에서 사용되므로 plugin에 넣어 준다. 
import vSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
Vue.component('v-select', vSelect)


// custom component 를 만들어서 
// 여기에 선언해도 global로 사용 가능하다. 
import CustomComponent from '@/components/CustomComponent'
Vue.component('custom-component', CustomComponent)


..
vue.config.js
..
plugins: [
    ...
    {
        ssr: true, src: '@/plugins/component.js'
    }
]