Uncaught SyntaxError: Must be called at the top of a `setup` function vue 3

4 января 2021 г. 2:20

Если в кратце: проблема в том, что ваша функция должна быть вызвана вверху функции setup(), а не быть вложенной в другую функцию (вызов которой происходит из setup()). 

Проще понять наглядно, почему может возникнуть ошибка Uncaught SyntaxError: Must be called at the top of a `setup` function, на примере моего случая, когда для тестов я решил обернуть axios.get() в setTimeout:

<script>
    import { ref } from 'vue'
    import ui_state from "../state";
    import axios from "axios";

    export default {
        name: 'Component',

        setup() {
            const { locale_url } = ui_state

            const data = ref('')

            setTimeout(() => {
                axios.get(locale_url('/apps/'))
                    .then(response => {
                        data.value = response.data;
                    })
            }, 1000);

            return {
                data
            }
        }
    }
</script>

Консоль выдавала ошибку:

Uncaught SyntaxError: Must be called at the top of a `setup` function
    at createCompileError (message-compiler.esm-bundler.js?f92f:32)
    at createI18nError (vue-i18n.esm-bundler.js?47e2:71)
    at useI18n (vue-i18n.esm-bundler.js?47e2:1928)
    at locale_url (state.js?faae:25)
    at eval (Component.vue?5ea5:49)

Проблема оказалась в том, что в мой скрипт ui_state (который я создал для хранения общего состояния приложения) я использую useI18n(), который импортировал с библиотекри vue-i18n:

import { reactive } from 'vue';
import { useI18n } from 'vue-i18n'

const state = reactive({
    base_url: 'http://localhost:8000/'
});

const locale_url = (url) => {
    const { locale } = useI18n()
    return state.base_url + '/' + locale.value + url
}

const ui_state = {
    locale_url
}

export default ui_state

В моём случае функия locale_url() служит для формирования url в зависимости от используемого языка.

Так как функия locale_url() находилась в другой функции, а не в setup(), то и возникала ошибка. Ошибки не было бы, если бы в функции locale_url() не использовался бы useI18n(). Но мне нужно его использовать для получения текущего locale.

Для решения моего примера достаточно вычислить url до использования setTimeout:

<script>
    import { ref } from 'vue'
    import ui_state from "../state";
    import axios from "axios";

    export default {
        name: 'Component',

        setup() {
            const { locale_url } = ui_state

            const data = ref('')

            const url = locale_url('/apps/')
            setTimeout(() => {
                axios.get(url)
                    .then(response => {
                        data.value = response.data;
                    })
            }, 1000);

            return {
                data
            }
        }
    }
</script>

Оцените статью

0 из 5 (всего 0 оценок)

captcha
Отмеченные звёздочкой поля ( * ) являются обязательными для заполнения.

Спасибо за ваш отзыв!

После нажатия кнопки "Отправить" ваше сообщение будет доставлено мне на почту.

Автор статьи

Права на использование материала, расположенного на этой странице https://vivazzi.pro/it/uncaught-syntaxerror-must-be-called-top-setup-function-vue-3/:

Разрешается копировать материал с указанием её автора и ссылки на оригинал без использования параметра rel="nofollow" в теге <a>. Использование:

Автор статьи: Мальцев Артём
Ссылка на статью: <a href="https://vivazzi.pro/it/uncaught-syntaxerror-must-be-called-top-setup-function-vue-3/">https://vivazzi.pro/it/uncaught-syntaxerror-must-be-called-top-setup-function-vue-3/</a>

Подробнее: Правила использования сайта

Комментариев: 0

Вы можете оставить комментарий как незарегистрированный пользователь.

Но зарегистрировавшись, вы сможете:

  • получать оповещения об ответах
  • просматривать свои комментарии
  • иметь возможность использовать все функции разработанных сервисов

Для комментрирования от своего имени, войдите или зарегистрируйтесь обычным способом или через социальные сети:

Отправить

На данный момент нет специального поиска, поэтому я предлагаю воспользоваться обычной поисковой системой, например, Google, добавив "vivazzi" после своего запроса.

Попробуйте

Выберите валюту для отображения денежных единиц