Ошибка «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. Не удивительно, что они проморгали багу в примерах в своём руководстве.

Опубликовано Андрей Гуцу

Системный администратор. Интересуюсь Linux, web-технологиями и Open Source. Люблю фантастику, игры жанров RTS и FPS.

Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

%d такие блоггеры, как: