Как исправить ошибку «You are using the runtime-only build of Vue where the template compiler is not available»?

Question

[Руслан Абсалямов]

Выходит ошибка

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-cli. Как я понимаю он ругается на вот этот код:

let tabs = [
        {
            name: "spending",
            label: "Расходы",
            component: {
                template: `<div>
                    <div>{{ account.spending.month }} за месяц</div>
                    <div>{{ account.spending.weekend }} за неделю</div>
                    <div>{{ account.spending.today }} за день</div>
                    </div>`
            }
        },
        {
            name: "income",
            label: "Доходы",
            component: {
                template: `
                <div>
                    <div>{{ account.income.month }} за месяц</div>
                    <div>{{ account.income.weekend }} за неделю</div>
                    <div>{{ account.income.today }} за день</div>
                </div>`
            }
        }
    ];

Как избавиться от этой ошибки?
Если брать песочницу, то там нет этой ошибки, а просто данные не выводятся
https://codesandbox.io/s/0x42kqxwqn
Находится сам компонент вкладки в /src/components/Tabs.vue
Отображение страницы в /src/App.vue

Answer 1

[coderisimo]

Вам пишут, что вы используете билд , где компилятор шаблонов недоступен. Либо пре-компилируйте в рендер ф-ции , либо используйте сборку с компилятором.
По умолчанию runtimeCompiler установлен в false . Попробуйте включить его в конфиге (vue.config.js).

module.exports = {
  runtimeCompiler: true
}

https://cli.vuejs.org/config/#runtimecompiler

Comments

[Руслан Абсалямов]

Если я правильно понял, то я добавил файл vue.config.js и внего поместил следующий код

module.exports = {
    runtimeCompiler: true
};

Но выходит ошибка

Property or method "account" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See

Мне кажется что-то надо как-то по другому делать template чтобы props работали.
А что имеется ввиду пре-компилируйте в рендер ф-ции?

[coderisimo]

Руслан Абсалямов,
Из документации

// компилятор требуется
new Vue({
  template: '<div>{{ hi }}</div>'
})

// не требуется
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

[Руслан Абсалямов]

coderisimo, Я немного по другому все сделал конечно, я понял что нафиг нужно будет мне компоненты тогда, а не подскажите, почему у меня во вьюшки высвечиваются данные а в консоле пишут проблемы

Error in render: "TypeError: Cannot read property 'month' of undefined"

По сути она не должна быть пустой.

<template>
    <div class="tabs">
        <button
            v-for="tab in tabs"
            :key="tab.name"
            @click="currentTab = tab"
        >{{ tab.label }}</button>

        <div>
            <div>{{ account[currentTab.name].month }} руб за месяц</div>
            <div>{{ account[currentTab.name].weekend }} руб за неделю</div>
            <div>{{ account[currentTab.name].today }} руб за день</div>
        </div>
    </div>
</template>

<script>
    let tabs = [
        {
            name: "spending",
            label: "Расходы"
        },
        {
            name: "income",
            label: "Доходы"
        }
    ];

    export default {
        name: "Tabs",
        props: ["account"],
        data(){
            return {
                currentTab: tabs[0],
                tabs: tabs
            }
        },
    }
</script>

Я в темлейте компонент убрал и сделал обычный блок, так как все равно все повторяются данные, просто данные будут меняться.
А вот с ошибкой которая приходит в консоле мне явно не понятно, у меня все рендериться превосходно, а тут описывает что он undefined
использовал axios может из-за него как-то это связано?
Когда я так делаю

beforeUpdate: function () {
            console.log(this.$props.account)
        }

То тогда в консоле он появляется. Как изменить жизненный цикл?

Answer 2

[Decadal]

Там все написано. В репозитории Vue приведен список версий. Вам нужен Full а не рантайм-онли.