Vue-next: Warning when template of view has multiple children

[andrewspy]

Version

4.0.0-alpha.10

Reproduction link

With Vue Router https://github.com/andrewspy/vite-app
https://github.com/posva/vite-app
or https://jsfiddle.net/posva/uhw02n4a/

Steps to reproduce

See view/Home.vue

<template>
  <!-- <div> -->
    <h1>Home</h1>
    <div>
      <span>count: {{ count }}</span>
      <button @click="increment()">increment</button>
    </div>
  <!-- </div> -->
</template>

<script>
import { ref } from "vue";

export default {
  name: "Home",

  setup() {
    const count = ref(0);
    function increment() {
      count.value  ;
    }

    return { count, increment };
  },
};
</script>

What is expected?

No warning

What is actually happening?

Warning as follow:

runtime-core:36 [Vue warn]: Extraneous non-props attributes (data-v-c44b8200) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <Home onVnodeMounted=fn<onVnodeMounted> onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined >  ... > 
  at <RouterView> 
  at <App>

[posva]

@yyx990803 I need your help with this one. Here is a boiled down repro without vue-router: https://github.com/posva/vite-app. I tried reproducing it in a jsfiddle but it doesn't work: https://jsfiddle.net/posva/uhw02n4a/

The one with Vite shows the warning and an empty attrs list but I would expect to be able to have the data-v-sha attribute similar to the jsfiddle.

I was thinking of displaying a more specific warning when it comes to data-v- attributes because they are added automatically so it will be very confusing, by checking the attrs object inside RouterView but maybe there is another way to suppress the warning specifically for data-v since I noticed it doesn't appear when manually putting the <Home/> component in the template and it seems to be given some special treatment since it's not _visible_ in attrs.

[andrewspy]

FYI, I have updated to vue (v3.0.0-rc.1) and vue-router (v4.0.0-beta.2), and the problem still persist. Is the problem limited to Vite or does it affect all Vue3 in general?

[posva]

@sodatea do you have an idea where would be the fix for this one? Maybe in vue-loader?

[sodatea]

cc @underfin @yyx990803
The warning comes from runtime-core, should data-v- property be an exception to the extra attrs warning?

https://github.com/vuejs/vue-next/blob/v3.0.0-rc.5/packages/runtime-core/src/componentRenderUtils.ts#L153-L160

[posva]

Right. Do you know why does it not appear on the jsfiddle?

[sodatea]

Because Home in the vite app is a multi-root component, while Foo in the jsfiddle is not, add another div to the Foo template and the warning will appear.

[posva]

Thanks, I thought the comments had an impact 😅

[underfin]

It caused by hoc component (RouterView) inherited scopeId and fallthrough scopeId attr to Home.I diffed the behavior v2 and v3.The v2 will generate attrs like this data-v-469af010="" data-v-fae5bece="" data-v-7ba5bd90="".The v3 look like lost the behavior or be intention to throw away this.I am not sure that.
Just transfer to core :)

[posva]

Transferred here for the discussion even thought it might end up going back

[jacobclevenger]

I'm not sure if you are already aware of this, but from my experience I believe you will need to add inheritAttrs: false to the components config. https://jsfiddle.net/b4vjw7er/ Doing so here removes the warning.

[underfin]

@posva this is already fixed.