[vue.js] did you register the component correctly? For recursive components, make sure to provide the "name" option.

문제점

개발중인 Vue.js 기반의 프로젝트에서, 배포를 위해 빌드를 하던중에

배포된 상태의 용량을 최대한 줄이기 위해서 import된 npm 패키지들을 분석하던 도중에,

컴포넌트 쪽 패키지가 생각보다 너무 크길래 줄이려고 시도하다가 난 이슈다.

 

확인결과 해당 컴포넌트 패키지를 import 하는 대상이, minify & uglify가 적용되지 않은 js를 사용하고 있었기에 minify & uglify 된 파일을 import 하는 형태로 바꿨는데...콘솔이 에러메시지로 가득차버렸다.

 

did you register the component correctly? For recursive components, make sure to provide the "name" option.

비공개해야하는 부분은 캡쳐에서 지웠습니다, 이해 바래여

사실, 이 에러는...Vue 파일에서 활용중인 컴포넌트가 제대로 Vue.install 이 되지 않았을 때 발생하는거라...익숙한 에러라서 더 헤맬 수 밖에 없었다. 노멀하게 빌드된 js는 되는데, 왜 minify & uglify를 적용한 js는 안 되는거지??

 

해결법

...결론부터 말하자면, 팀원중 한 분이 설정값에 주석처리를 하고 올려뒀었다...

output: {
    path : resolve("/dist"),
    filename: 'component.min.js',
    libraryTarget: 'umd', // 이거랑
    library: 'component', // 이거
    umdNamedDefine: true
},

만약 컴포넌트 패키지를 '라이브러리'의 형태로 활용하는 체계가 아니었다면, 해당 항목은 필요가 없다.

 

하지만 npm install을 통해서 라이브러리의 형태로 현재는 활용되고있기 때문에...

저 설정값이 없으면 안 된다. 위와 같이 libraryTarget: 'umd' 로 설정을 해야, 라이브러리의 형태로 활용이되고 그에따라 Vue에서 플러그인 설치를 위한 Vue.install도 적용이 되는 것이다.