Ошибка «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 c Ant Design
Столкнулся сегодня с ошибкой :
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
при попытке заюзать Ant Design для Vue, при этом ошибка отлавливается только в консоли, в браузере просто отображается белая страница.
Оказалось, что в main.js вместо
new Vue({
el: "#app",
components: { App },
template: "
Проблема проявляется из-за того, что при использовании такого шаблона подключается runtime-only версия Vue, в которой отсутствует компиляция темплейтов. Разница между видами билдов Vue неплохо объясняется тут https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
Странно что разработчики Ant Design для Vue в своём руководстве https://vue.ant.design/docs/vue/use-with-vue-cli/ используют для примера, который не корректно работает в связке с vue-cli 3 и babel-plugin-import.
Для решения проблемы нужно было вместо упомянутого выше кода указать следующий
new Vue(App).$mount('#app')
или
new Vue({
render: h => h(App),
}).$mount('#app')
после чего проблема перестаёт проявляться.
По другому эту проблему можно решить, добавив в vue.config.js, в блок module.exports = {…} код
configureWebpack: {
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
}
}
Это решает проблему. Ошибка перестаёт проявляться даже при использовании упомянутого выше проблемного кода из документации Ant Design of Vue.
Если бы я использовал для сборки напрямую чистый Webpack, без использвоания магии vue-cli, проблему можно было решить ещё проще, добавив в конфиг Webpack webpack.base.conf.js код
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
},
В моём случае, так как используется vue-cli, а не чистый Webpack, этот вариант не подходит.
P.S.: глянул что разрабы юзают в своём примере на CodeSandbox, оказалось что они как раз юзают чистый Webpack, и третий вариант решения проблемы, что подходит для сборки проекта одним Webpack. Не удивительно, что они проморгали багу в примерах в своём руководстве.