Как устранить ошибку script error в ymaps при закрытии Vue компонента?

Я использую в своем Vue 3 проекте яндекс карты (ymaps 2.1). Карта находится на компоненте, который появляется по нажатию кнопки, и в результате некоторых событий исчезает. Как выяснилось, ошибка возникает в момент построения маршрута, когда метод map.geoObjects.add() пытается найти карту по тегу и у него это не получается, поскольку карта уже закрыта. Ошибка изображена ниже:

Script error.
    at handleError (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:299:58)
    at eval (webpack-internal:///./node_modules/webpack-dev-server/client/overlay.js:318:7)

не сказал бы что ошибка сильно мешает, однако хотелось бы избавиться от баннера на все лицо. Отрывок кода:

const buildRoute = async(destination) => {
    let currentPos = await ymaps.geolocation.get();//Получение координат пользователя
    multiRoute = new ymaps.multiRouter.MultiRoute({// Точки маршрута. Точки могут быть заданы как координатами, так и адресом. 
        referencePoints: [
            currentPos.geoObjects.position,
            (destination || props.call.addr_full_str_fact || props.call.addr_full_str)
        ],
        params: {
            routingMode: ROUTING_MODE[0],
            avoidTrafficJams: AVOID_TRAFFIC,
        }
    }, {
        boundsAutoApply: true// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
    });

    // Добавление маршрута на карту.
    map.geoObjects.add(multiRoute);//Выдает ошибку скрипта если, при монтировании маршрута, карта исчезает
};

const initMap = async() => {
    if (componentDead) return 0;
    currentPos = currentPos || await ymaps.geolocation.get();//Получение координат пользователя
    map = new ymaps.Map("map", {
        center: currentPos.geoObjects.position,
        zoom: MAP_ZOOM
    });
    map.controls.remove('rulerControl')
    if (props.call)
        buildRoute();
};


Ymaps.load('https://api-maps.yandex.ru/2.1?apikey=c0e7b2e5-acb1-4f1c-ae2e-39f1cf4ca6a4&lang=ru_RU').then(map => {
    if (componentDead) return 0;
    ymaps = map;
    if (callExists.value)
        initMap();
});
onBeforeUnmount(() => {
    componentDead = true;
});

Я пытался использовать trycatch на методе map.geoObjects.add(), однако он не отрабатывает. Также пытался останавливать функцию, отслеживая демонтирование компонента onBeforeUnmount, однако ошибка происходит именно в методе, не позволяя напрямую остановить процесс


Ответы (1 шт):

Автор решения: YaSupport

Вы можете попробовать пакет @yandex/ymaps3-vuefy для интеграции API Карт с Vue. Обращаю внимание, что такая интеграция возможна только на третьей версии API Карт.

→ Ссылка