결론

Vue 컴퍼넌트로 named export 는 사용할 수 없다.
Vuejs의 GitHub Issue에서 Vue 프레임워크 창립자인 Evan You씨가 「Vue의 컴퍼넌트는 default export가 필수입니다」라고 코멘트하고 있었다.default export 그러면 안 된다 ・・・라고 하는 것은 즉 named export 라고 판단한 이야기.

Github Issue:
htps : // 기주 b. 코 m/ゔ에 js/ゔ에-아아 r/이스에 s/1234

답변 원문의 일부:

TL;DR: the component must be the default export and this is not going to change

스토리

시작

JavaScript에서는 named export 사용하는 것이 좋다고 하는 기사를 배독했다.

· ES modules의 export default는 사용하지 않는 것이 좋다
· 자바 스크립트의 export default 안티 패턴에 대해 검증 해 보았습니다.

그럼 Vue에서도 컴포넌트도 named export로 하는 것이 좋다!
하는 것으로 구현했지만 능숙하지 않았다.

했던 일

Vue CLI로 프로젝트 만들기.
원래부터 작성된 App.vue 와 HelloWorld.vue 를 named export
로 바꾸어 본다.

변경 전 (default export)

App.vue

import HelloWorld from './components/HelloWorld.vue'

HelloWorld.vue

<script>
export default {
    name: 'HelloWorld',
    props: {
    msg: String
  }
}
</script>

↓

변경 후 (named export)

App.vue

import  { HelloWorld }  from './components/HelloWorld.vue';

HelloWorld.vue

<script>
export const HelloWorld = {
    name: 'HelloWorld',
    props: {
    msg: String,
  },
};
</script>

오류에 부딪히다

그러면 화면이 하얗게 되어 개발자 툴의 콘솔에 다음과 같은 에러가 나온다.Uncaught TypeError: Cannot set property 'render' of undefined

터미널에는 다음 경고가 나온다.

"export 'default' (imported as 'mod') was not found in '-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./HelloWorld.vue?vue&type=script&lang=js&'

오류 확인

이러한 에러는, Vue로 default export가 올바르게 설정되어 있지 않으면 나오는 것 같다.

Stack Overflow Q&A
· Cannot set property 'render' of undefined
· Uncaught TypeError: Cannot Set Property 'Render' of Undefined
· Nuxt export 'default' (imported as 'mod') was not found

원인 조사

더 알아보고 Vue의 GitHub에서 이런 Issue를 발견했습니다.

Allow named exports for .vue components. Don't require having a default export #1234
(Vue에서 named export를 사용하십시오. default export가 아닙니다.)

교환을 일부 발췌하여 번역하면 ...

seems like vue-loader is looking for a default export by default

(named export를 사용하려고 해도, vue-loader는 최초로 default export를 확인하는 사양이 되어 있는 것 같아, 경고가 나 버립니다만 ··)

라는 질문에 대해

The component itself must be the default export. That's a requirement.

(default export는 필수입니다.)

라는 답변이 왔고,
그 후에도,

TL;DR: the component must be the default export and this is not going to change


(TL;DR: default export는 필수이며 변하지 않습니다.)

라고 대답하고 있다.

결론에 이르다

Vue의 사양상, 컴퍼넌트는 default export 밖에 사용할 수 없는 것 같은 것을 알았다.
그리고 위의 응답자는 Vue 프레임 워크 창립자의 Evan You 씨였습니다!
그가 바로 무리라고 말하고 있기 때문에, named export는 사용할 수 없을 것이라고 판단했다.

요약

Vue의 컴퍼넌트에서는 named export 는 사용할 수 없다고 알았다.　
그 이외의 장소라면 사용할 수 있다고 생각하기 때문에, 또 시험해 보려고 한다.