Vue: Yandex.Maps and many other libraries does not work in version 3!

[dmitrymaslov99]

Version

3.0.0

Reproduction link

https://codesandbox.io/s/patient-dust-2q9bj?file=/src/components/Maps.vue

Steps to reproduce

1. We connect the library https://yandex.ru/dev/maps/jsapi/doc/2.1/quick-start/index.html/?from=techmapsmain
2. Add a point to the map
   This library (https://vue-yandex-maps.github.io/guide/) and a number of others also stopped working. The release of version 3 messed up a lot.
   https://github.com/PNKBizz/vue-yandex-map/issues/275

What is expected?

Point added

What is actually happening?

Numerous errors in the console: https://imgur.com/a/VElaZ4G

---

Sandbox link 2 version: https://codesandbox.io/s/charming-haibt-06w4x?file=/src/components/Maps.vue:0-1186
Sandbox link version 3: https://codesandbox.io/s/patient-dust-2q9bj?file=/src/components/Maps.vue
We use vue 3 versions for ionic, but due to compatibility problems we cannot finish our projects.

[posva]

Open the issue on their repository not here

[dmitrymaslov99]

The library has been working for 5 years on all platforms, in all frameworks. View version 3 was updated and half of the libraries broke.

[LinusBorg]

Vue 3 is a major version release. Major versions, by definition, come with breaking changes.

Libraries using Vue need to update to work with the new major version.

You can continue to use Vue 2 until you find that the libraries you need have done that.

[dmitrymaslov99]

Nobody will update their libraries in pure JS because you broke something there. You are losing a very large number of users. We need version 3 of the Vue because of ionic.
If it was a framework-specific library, then it would be a different matter. But this is a regular JS script.

[LinusBorg]

But this is a regular JS script.

I missed that part as you mentioned a vue lib right after.

Took another look. this fixes it:

import { markRaw } from 'vue'

initializeYandexMap() {
      ymaps.ready(() => {
        const map = new ymaps.Map("yandex-map", {
          center: [55.76, 37.64],
          zoom: 10,
        });
        this. map = markRaw(map)
        this.setMarkers();
      });
    },

in vue 3, anything you save on this will be reactive by default. You can opt out of the reacivity with markRaw(), which is sometimes necessary as reactivity can mess with stateful class instances like used here.

Edit:

A simpler solution is to remove map: null from data and by that, not make the object reactive in the first place.

We already recommend against making complex class instances reactive in Vue 2. It just so happens that is particular class only breaks now in Vue 3.

[dmitrymaslov99]

Thank you so much! It works!