CODEWITHSUNDEEP
typescriptvue.jsvuejs2vue-routervue-router4
jasie
jasie

Reputation: 2444

warning in vue-router 3.5.1: <router-link>'s tag prop is deprecated and has been removed in Vue Router 4

Since I updated our Vue.js app's node packages, I get the following warning in the browser console:

[vue-router] 's tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link. @ vue-router.esm.js:16

The info is pretty straight-forward, sure, BUT:

At the one place, where <router-link> is in use, the deprecated tag prop is not even applied:

<router-link
    class="button-add"
    :to="{
        name: 'ItemEditorAdd',
        params: { parent_item_id: item.id },
    }"
    :id="'button-' + item.id"
>
    <i class="material-icons">add</i>
</router-link>

Furthermore, the installed vue-router package is not even in version 4 but in version 3, which correctly matches the installed vue.js in v2.6. The warning message gives me the impression, that the compatiblity checker assumes v4 is in use, though.

Excerpt from package.json:

"vue": "^2.6.12",
"vue-class-component": "^7.2.6",
"vue-cookies-ts": "^1.5.19",
"vue-i18n": "^8.24.4",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.5.1",
"vuex": "^3.6.2",
"vuex-class": "^0.3.2",
"vuex-oidc": "^3.10.2"

I am confused, and I couldn't find a solution here in StackOverflow or in vue-router Github issues.
Is this warning not fixable, but just a constant reminder to mind this when upgrading sometime in the future?? If so, why does it not check if tag prop is really used - seems a bit spammy..

UPDATE
The problem also occurs in vue-router v3.5.2.
There is a GitHub vue-router issue (closed) and a Github boostrap-vue issue (open).

Upvotes: 3

Views: 4239

Answers (2)

jasie
jasie

Reputation: 2444

Found the answer in this GitHub boostrap-vue issues comment by caugner:

The issue was fixed by #6374 and will appear in the next minor version (2.22.0).
That PR resolves the warnings for most users, except those that actually use the event and tag props on BLink and similar components.

bootstrap-vue 2.22.0 is not yet released. The current latest release is v2.21.2 from January 2021.

AFAIK there is currently no solution for this warning in the case of not even using the event and tag properties.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85573

I just checked their code and they are having a default value for tag:

tag: {
      type: String,
      default: 'a'
    },

And checking if tag, show warning. This is ridiculous, you have to wait until they remove it.

if ('tag' in this.$options.propsData && !warnedTagProp) {
        warn(
          false,
          `<router-link>'s tag prop is deprecated and has been removed in Vue Router 4. Use the v-slot API to remove this warning: https://next.router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link.`
        )
        warnedTagProp = true
      }

To solve it, you must follow this: https://next.router.vuejs.org/guide/migration/#removal-of-append-prop-in-router-link

<router-link
    class="button-add"
    :to="{
        name: 'ItemEditorAdd',
        params: { parent_item_id: item.id },
    }"
    :id="'button-' + item.id"
    custom
    :slot="{ navigate }"
>
    <i class="material-icons" @click="navigate" @keypress.enter="navigate" role="link">add</i>
</router-link>

I'm still not 100% sure if this stops throwing warning because of their weird check having set a default value on their own. If you still get warning after applying the preceding code, then you don't need to worry about it as it's just warning and it's only shown in environment other than production.

Upvotes: 0

Related Questions