[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

[icleolion]

Any update on this?

Think it’s the Vue team you want to be poking, not the Vuetify guys.
vuejs/vue#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 😅.

[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

[GregPeden]

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!

[GregPeden]

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.

[chrpeters]

I am also experiencing this with VIcon

[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.

[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.

[steeve2307]

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 ?

[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. #11228 (comment)

Requires Vue to fix it from their end. vuejs/vue#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 #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!