fix: WARN [Vue warn]: Extraneous non-props attributes (data-v-14ce88ff) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

Bắt đầu với bản tái hiện được liên kết trong bình luận của issue 722 trên Nuxt DevTools và lần theo cảnh báo qua DialogRoot, DrawerRoot, ShadcnTooltipProvider và dashboard route được hiển thị trong stack trace. Xác nhận hành vi của cảnh báo khi devtools được bật và tắt; hoàn tất khi cảnh báo extraneous non-props không còn xuất hiện.

🐛 The bug

 WARN  [Vue warn]: Extraneous non-props attributes (data-v-14ce88ff) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <DialogRoot open=false modal=true onUpdate:open=fn<A>  ... > 
  at <DrawerRoot shouldScaleBackground=true onDrag=fn onRelease=fn  ... > 
  at <Drawer> 
  at <Index key="03348673-e6ea-4208-9df5-1d85e2a7461f" > 
  at <ClientOnly> 
  at <Dashboard> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/dashboard" vnode= { __v_isVNode: true,
  __v_skip: true,
  type:
   { __name: 'index',
     setup: [Function (anonymous)],
     ssrRender: [Function: _sfc_ssrRender],
     __file: 'A:/xxx/pages/index.vue' },
  props:
   { onVnodeUnmounted: [Function: onVnodeUnmounted],
     ref:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined } },
  key: null,
  ref:
   { i:
      { uid: 43,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: null,
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: [Object],
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     r:
      RefImpl {
        dep: [Dep],
        __v_isRef: true,
        __v_isShallow: false,
        _rawValue: undefined,
        _value: undefined },
     k: undefined,
     f: false },
  scopeId: null,
  slotScopeIds: null,
  children: null,
  component: null,
  suspense: null,
  ssContent: null,
  ssFallback: null,
  dirs: null,
  transition: null,
  el: null,
  anchor: null,
  target: null,
  targetStart: null,
  targetAnchor: null,
  staticCount: 0,
  shapeFlag: 4,
  patchFlag: 0,
  dynamicProps: null,
  dynamicChildren: null,
  appContext: null,
  ctx:
   <ref *1> {
     uid: 43,
     vnode:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Object],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: [Circular *1],
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 36,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     type:
      { name: 'RouterView',
        inheritAttrs: false,
        props: [Object],
        compatConfig: [Object],
        setup: [Function: setup] },
     parent:
      { uid: 42,
        vnode: [Object],
        type: [Object],
        parent: [Object],
        appContext: [Object],
        root: [Object],
        next: null,
        subTree: [Object],
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function (anonymous)],
        proxy: [Object],
        exposed: [Object],
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [Array],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: false,
        ctx: [Object],
        data: {},
        props: [Object],
        attrs: {},
        slots: {},
        refs: {},
        setupState: {},
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: null,
        sp: null },
     appContext:
      { app: [Object],
        config: [Object],
        mixins: [],
        components: [Object],
        directives: [Object],
        provides: [Object: null prototype],
        optionsCache: [WeakMap],
        propsCache: [WeakMap],
        emitsCache: [WeakMap] },
     root:
      <ref *2> {
        uid: 0,
        vnode: [Object],
        type: [Object],
        parent: null,
        appContext: [Object],
        root: [Circular *2],
        next: null,
        subTree: null,
        effect: null,
        update: null,
        job: null,
        scope: [EffectScope],
        render: [Function: NOOP],
        proxy: {},
        exposed: {},
        exposeProxy: null,
        withProxy: null,
        provides: [Object <Complex prototype>],
        ids: [Array],
        accessCache: [Object: null prototype] {},
        renderCache: [],
        components: null,
        directives: null,
        propsOptions: [],
        emitsOptions: null,
        emit: [Function: bound emit],
        emitted: null,
        propsDefaults: [Object: null prototype] {},
        inheritAttrs: undefined,
        ctx: {},
        data: {},
        props: {},
        attrs: {},
        slots: {},
        refs: {},
        setupState: [Object],
        setupContext: [Object],
        suspense: null,
        suspenseId: 0,
        asyncDep: null,
        asyncResolved: false,
        isMounted: false,
        isUnmounted: false,
        isDeactivated: false,
        bc: null,
        c: null,
        bm: null,
        m: null,
        bu: null,
        u: null,
        um: null,
        bum: null,
        da: null,
        a: null,
        rtg: null,
        rtc: null,
        ec: [Array],
        sp: null,
        devtoolsRawSetupState: [Object] },
     next: null,
     subTree:
      { __v_isVNode: true,
        __v_skip: true,
        type: [Function],
        props: [Object],
        key: null,
        ref: null,
        scopeId: null,
        slotScopeIds: null,
        children: [Object],
        component: [Object],
        suspense: null,
        ssContent: null,
        ssFallback: null,
        dirs: null,
        transition: null,
        el: null,
        anchor: null,
        target: null,
        targetStart: null,
        targetAnchor: null,
        staticCount: 0,
        shapeFlag: 34,
        patchFlag: 0,
        dynamicProps: null,
        dynamicChildren: null,
        appContext: null,
        ctx: [Object] },
     effect: null,
     update: null,
     job: null,
     scope:
      EffectScope {
        detached: true,
        _active: true,
        effects: [],
        cleanups: [],
        _isPaused: false,
        parent: undefined },
     render: [Function (anonymous)],
     proxy: { name: [Getter/Setter], route: [Getter/Setter] },
     exposed: null,
     exposeProxy: null,
     withProxy: null,
     provides:
      Object <Object <Complex prototype>> {
        [Symbol(router view depth)]: [ComputedRefImpl],
        [Symbol(router view location matched)]: [ComputedRefImpl],
        [Symbol(router view location)]: [ComputedRefImpl] },
     ids: [ '0-', 0, 0 ],
     accessCache: [Object: null prototype] {},
     renderCache: [],
     components: null,
     directives: null,
     propsOptions: [ [Object], [Array] ],
     emitsOptions: null,
     emit: [Function: bound emit],
     emitted: null,
     propsDefaults: [Object: null prototype] {},
     inheritAttrs: false,
     ctx: { name: [Getter/Setter], route: [Getter/Setter] },
     data: {},
     props: { route: undefined, name: 'default' },
     attrs: {},
     slots: { default: [Function] },
     refs: {},
     setupState: {},
     setupContext: { attrs: [Getter], slots: [Getter], emit: [Getter], expose: [Function: expose] },
     suspense: null,
     suspenseId: 0,
     asyncDep: null,
     asyncResolved: false,
     isMounted: false,
     isUnmounted: false,
     isDeactivated: false,
     bc: null,
     c: null,
     bm: null,
     m: null,
     bu: null,
     u: null,
     um: null,
     bum: null,
     da: null,
     a: null,
     rtg: null,
     rtc: null,
     ec: null,
     sp: null } } route= { fullPath: '/dashboard',
  hash: '',
  query: {},
  name: 'Dashboard',
  path: '/dashboard',
  params: {},
  matched:
   [ { path: '/dashboard',
       redirect: undefined,
       name: 'Dashboard',
       meta: [Object],
       aliasOf: [Object],
       beforeEnter: undefined,
       props: [Object],
       children: [],
       instances: {},
       leaveGuards: Set(0) {},
       updateGuards: Set(0) {},
       enterCallbacks: {},
       components: [Object] } ],
  meta:
   { name: 'Dashboard', middleware: [ 'protected' ], alias: [ '/dashboard', '/chat' ] },
  redirectedFrom: undefined,
  href: '/dashboard' }  ... >
  at <BaseTransition onAfterLeave= [ [Function: onAfterLeave] ] mode="out-in" appear=false  ... >
  at <Transition onAfterLeave= [ [Function: onAfterLeave] ] name="page" mode="out-in" >
  at <RouterView name=undefined route=undefined >
  at <NuxtPage>
  at <Default ref=Ref< undefined > >
  at <LayoutLoader key="default" layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } name="default" >
  at <NuxtLayoutProvider layoutProps= { ref:
   RefImpl {
     dep:
      Dep {
        computed: undefined,
        version: 0,
        activeLink: undefined,
        subs: undefined,
        map: undefined,
        key: undefined,
        sc: 0,
        subsHead: undefined },
     __v_isRef: true,
     __v_isShallow: false,
     _rawValue: undefined,
     _value: undefined } } key="default" name="default"  ... >
  at <BaseTransition mode="out-in" appear=false persisted=false  ... >
  at <Transition name="layout" mode="out-in" >
  at <NuxtLayout>
  at <TooltipProvider disableHoverableContent=false disableClosingTrigger=false disabled=false  ... >
  at <TooltipProvider>
  at <ConfigProvider use-id=fn<useSsrSaveId> >
  at <App>
  at <NuxtRoot>

🛠️ To reproduce

https://github.com/nuxt/devtools/issues/722#issuecomment-2397386293

🌈 Expected behavior

No warning, if I do not have devtools enabled.
No warning at all, since this should be fixed (https://github.com/nuxt/devtools/issues/722#issuecomment-2397386293).

ℹ️ Additional context

I still get this warning using ShadcnTooltipProvider (yes, I am using the latest versions of everything). The weird thing is, that I even disabled devtools and componentInspector in my nuxt.config.ts.

• Operating System: Windows_NT
• Node Version: v18.19.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: pnpm@9.1.1
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

├── @nuxt/devtools-kit 1.5.2
├── @nuxt/devtools 1.5.2
├── @nuxt/devtools-kit 1.5.2