Vuetify: [Bug Report] warning with VueJS 2.6.11

[tcastelly]

Environment

Vuetify Version: 2.1.15
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.79
OS: Linux x86_64

Steps to reproduce

Use a VCalendar

https://codepen.io/pen/?&editable=true&editors=101

Expected Behavior

No warning expected

Actual Behavior

A warning is displayed:

[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <div>.

found in

---> <VCalendarMonthly>
       <VCalendar>
         <VSheet>
           <VApp>
             <Root>

Reproduction Link

https://codepen.io/sshenron/pen/povRRgj?&editable=true&editors=101#anon-signup

Other comments

No warning with VueJS in 2.6.10.

[jacekkarczmarczyk]

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VCalendar/VCalendarDaily.ts#L245

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VCalendar/VCalendarWeekly.ts#L183

[icleolion]

Seeing this also on VIcon

[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <svg>.

found in

---> <VIcon>
       <VListItem>
         <RouterLink>
           <VList>
             <ThemeProvider>
               <VMenu>

I'm assuming it's related to https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VIcon/VIcon.ts#L194

[mynormeza]

Any update on this?

[icleolion]

Any update on this?

Think it’s the Vue team you want to be poking, not the Vuetify guys.
https://github.com/vuejs/vue/issues/10939(https://github.com/vuejs/vue/issues/10939)

[saidattax]

Not a workaround, but just too hide it:

It was too annyoing so I went into the vue folder in node_modules, project search and removed the following

// removed this line
warn(("The .native modifier for v-on is only valid on components but it was used on <" + tag + ">."),context);

[Mondal10]

Although the warning was intentional as mentioned above by @icleolion. We can handle the Vue Warnings from main.js something like this

const ignoreWarnMessage = 'The .native modifier for v-on is only valid on components but it was used on <div>.';
Vue.config.warnHandler = function (msg, vm, trace) {
  // `trace` is the component hierarchy trace
  if (msg === ignoreWarnMessage) {
    msg = null;
    vm = null;
    trace = null;
  }
}

Not the best way but if you are frustrated by the console error just because you are using one of the vuetify component (v-calendar for me).
Hope that helps :sweat_smile:.

[Almoullim]

Is this just a warning or will it affect anything? Should I use @Mondal10 method and simply ignore the warning, or should I downgrade to vue 2.6.10 instead?

[eggplantiny]

Is this just a warning or will it affect anything? Should I use @Mondal10 method and simply ignore the warning, or should I downgrade to vue 2.6.10 instead?

It seems has another affect.
Can't make Event line when that error occurred

[SirLamer]

Think it’s the Vue team you want to be poking, not the Vuetify guys.
vuejs/vue#10939

To be clear, I'm pretty sure this is a new error message in Vue, but it was meant to be implemented as a warning, not a console error. It remains the case that some Vuetify components are implementing the "native" modifier on their children elements, and so if that child is not itself a Vue component, this error is thrown. Vuetify should be checking to see if the child element is already native HTML before applying this modifier.

[lunegov]

I think that is "hack" for me, but it works and resolve problem without turning-Off of warnings. I'm just replace all "nativeOn" listeners in /node_modules/vuetify/dist/vuetify.js to "On" (without native). All works and doesn't push any warnings.

[klaveren]

@lunegov thanks this work!

[SirLamer]

The solution is, in every case where this pattern is used in Vuetify:

• Look at child element. Is it a VueJS component object?
  
  
  
  • If yes, apply "native" modifier
  
  

I would submit a PR for this except I don't have much experience with hard-coding "render" methods as are used throughout Vuetify.

Doing hacky work-around things just to suppress the warning is a mistake. The warning exists for a reason.

[marcoarruda]

I had the same error here, any updates?

[paulvonber]

any news on this? as right now seems like faSvg is totally unusable with vuetify.

[chrpeters]

I am also experiencing this with VIcon

[marko-mlinarevic]

so nothing yet?

[bromix]

Same problem here today:

vue.runtime.esm.js:619 [Vue warn]: The .native modifier for v-on is only valid on components but it was used on <svg>.

found in

---> <VIcon>
       <VAvatar>
         <VCard>
           <Activate.selection> at src/views/activate.selection.vue
             <VContent>
               <VApp>
                 <App> at src/App.vue
                   <Root>

[paulvonber]

const ignoreWarnMessage = "[your error message]"; Vue.config.warnHandler = function(msg, vm, trace) { if (msg !== ignoreWarnMessage) { console.error("[Vue warn]: " + msg + trace); } };
Try this

That's not the solution.

[yaroslavolekh]

The same... ((
Vuetify v2.2.13
Vue v2.6.11

[mimischi]

It's cool that everyone is having the same problem, but could future people please not spam this thread? Instead use the "Subscribe" button in the right sidebar to be notified of any changes. Thanks!

[marko-mlinarevic]

If there is no activity authors almost always close topic because of inactivity

[icleolion]

If there is no activity authors almost always close topic because of inactivity

I would say that doesn’t apply here. If this was an issue that needed further information and they weren’t getting that from the OP or the community then yeah I would expect it to be closed at some point. But this issue is no longer in triage, they have the information they need, and it has been tagged as a bug, so people don’t need to be spamming the thread repeating things the OP and myself have already reported.

My only concern with this issue is that it has been tagged as upstream, which I don’t think is correct. I think the Vue team have cracked down on a practice they felt could cause problems and it’s up to the Vuetify team to adjust accordingly. I’m not sure if the Vuetify team’s practices mean this ticket hasn’t received any attention due to the upstream tag filtering it out/downgrading it from however they prioritise things.

[MajesticPotatoe]

Its a combination of both us and upstream, there is an open PR for the upstream issue (which may or may not resolve the issue).

There is no need to keep spamming the post. a simple 👍 on the initial thread will suffice to show interest. We also kindly encourage the community, if they have the time, to submit PR's as well. Sir Lamar's seems to have a pretty good starting point.

Current ways around the warning right now are disable it (not recommended) or staying on 2.6.10

[VitaliyDemchuk]

Is there any solution to this problem?

[aronsuarez]

A workaround is to create a wrapper component that wraps the fa component in a div, this will work.

custom component

<template>
  <div>
    <font-awesome-icon
      v-bind="$props"
    >
      <slot></slot>
    </font-awesome-icon>
  </div>
</template>

<script lang="ts">
import {
  computed, defineComponent, onMounted, reactive, toRefs,
} from '@vue/composition-api';

export default defineComponent({
  props: {
    icon: Array,
  },
  setup(props, context) {
    return {
    };
  },
});
</script>

register a custom icon and use the component

export default new Vuetify({
  options: {
    customProperties: true,
  },
  icons: {
    iconfont: 'faSvg',
    values: {
      eye: {
        component: 'vc-icon',
        props: {
          icon: ['fad', 'eye'],
        },
      },
    },
  },
});

then it is usable like this

             <v-text-field
                outlined
                :type="showPassword ? 'text' : 'password'"
                :placeholder="$t('signUp.form.rePassword')"
                v-model="rePassword"
                required
                :disabled="loading"
                :append-icon="'$vuetify.icons.values.eye'"
                @click:append="togglePassword"
              >
              </v-text-field>

[mrdibre]

Same problem here.

[ghost]

A workaround is to create a wrapper component that wraps the fa component in a div, this will work.

custom component

<template>
  <div>
    <font-awesome-icon
      v-bind="$props"
    >
      <slot></slot>
    </font-awesome-icon>
  </div>
</template>

<script lang="ts">
import {
  computed, defineComponent, onMounted, reactive, toRefs,
} from '@vue/composition-api';

export default defineComponent({
  props: {
    icon: Array,
  },
  setup(props, context) {
    return {
    };
  },
});
</script>

register a custom icon and use the component

export default new Vuetify({
  options: {
    customProperties: true,
  },
  icons: {
    iconfont: 'faSvg',
    values: {
      eye: {
        component: 'vc-icon',
        props: {
          icon: ['fad', 'eye'],
        },
      },
    },
  },
});

then it is usable like this

             <v-text-field
                outlined
                :type="showPassword ? 'text' : 'password'"
                :placeholder="$t('signUp.form.rePassword')"
                v-model="rePassword"
                required
                :disabled="loading"
                :append-icon="'$vuetify.icons.values.eye'"
                @click:append="togglePassword"
              >
              </v-text-field>

This works for me.

[jaysunxiao]

I have same proplem when using VCalendar

[qm3ster]

What a waste of issue #9999

[liu-zhijie]

I have same proplem when using VCalendar

[johnleider]

Fix causes regression with mergeData. reopening.

[icleolion]

So is the intention for #11228 to fix VIcon this time around? Or do I need to raise a separate issue for that to be resolved via another method?

[KaelWD]

Yes, the last one was merged unfinished with failing ci.

[salliel]

Hi, I have the same issues with nuxt when I use v-calendar, I have the latest version of nuxt.
is-there a new solution to solve it please ?

[GuasaPlay]

Hola, tengo los mismos problemas con nuxt cuando uso v-calendar, tengo la última versión de nuxt.
¿Hay una nueva solución para resolverlo, por favor?

I have the same problem too

[NoahStahl]

Here's a temporary workaround usage of ignoring this message using warnhandler API as suggested above by @Mondal10. This version passes through everything except the ignored message as console errors, where the original suggestion does not.

In main.js/ts:

const ignoredMessage = "The .native modifier for v-on is only valid on components but it was used on <div>.";

Vue.config.warnHandler = (message, vm, componentTrace) => {
    if (message !== ignoredMessage) {
        console.error(message + componentTrace);
    }
};

[johnleider]

@KaelWD has a PR on this but he's been very busy. Removing from 2.2.x for now.

[KaelWD]

is the intention for to fix VIcon this time around?

I don't know if that's actually possible without a change in Vue as well. It was added to fix #6228, some icon components don't properly pass listeners through and we can't tell before rendering how they actually behave.

• Full component, passes $listeners (works with on or nativeOn)
• Full component, doesn't pass $listeners (only works with nativeOn)
• Functional component, renders a native element (only works with on)
• Functional component, renders another component (works with one of on or nativeOn depending on what the other component does)

If Vue treated nativeOn like on on native elements then this wouldn't be a problem.

[anisabboud]

I'm still getting this error with latest Vuetify 2.3.0 (I'm using custom svg icons):

[icleolion]

VIcon is unfixable from Vuetify’s side. https://github.com/vuetifyjs/vuetify/pull/11228#issuecomment-635137834

Requires Vue to fix it from their end. https://github.com/vuejs/vue/issues/10939

[icleolion]

For those still having issue with VIcon and are tracking this issue, figured I'd drop a note in here to say that https://github.com/vuetifyjs/vuetify/pull/12148 has resolved the issue for VIcon now also. With both VIcon and VCalendar now fixed, you can now upgrade beyond Vue 2.6.10 without having your console flooded with errors!