[webpack] you are using the runtime-only build of vue where the template compiler is not available

문제점

Vue Cli로 개발을 하다보면 가끔 이런 에러를 만나게 된다.

you are using the runtime-only build of vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

 

해결법

위와 같은 에러는 아래처럼 Vue.js에서 동적 컴포넌트를 활용하려 할 때 발생하는 에러다.

<component :is="dynamicComponent"/>

이는 Vue Cli의 설정에서, 동적 컴포넌트에 대한 컴파일 기본값이 false 이기 때문에 발생하는 것(Vue Cli : runtimeCompiler)으로써, 해결법은 간단하게 vue.config.js 파일에 runtimeCompiler 옵션을 설정해주면 된다.

module.exports = {
    runtimeCompiler // 혹은 runtimeCompiler : true
}

---

추가설명

확장자가 *.vue인 파일들은, vue-loader에 의해 Javascript로 변환되서 동작한다. 그렇기에 서버가 기동되는 중에도 언제든 바뀔 수 있는 동적 컴포넌트를 활용하고자 할 때는, Runtime 시에 Compiler가 함께 동작하게 해달라는 옵션을 줘야하고, 그게 바로 위에서 설명한 runtimeCompiler다. 즉, 서버가 동작하는 중(Runtime)에도 언제든 *.vue 파일내의 동적 컴포넌트들이 Javascript 화되서 브라우져가 이해할 수 있게끔 변환(Compiler)을 허용해주는 옵션인 것이다.

 

 

공홈 내용 : [Runtime + Compiler] vs [Runtime-only]