nuxt / nuxt/devtools

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.

Open
#745 5 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
3.3k
Forks
214
Avg merge
13h 22m
Merged PRs (30d)
18

Description

🐛 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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction linked in the Nuxt DevTools issue 722 comment and trace the warning through DialogRoot, DrawerRoot, ShadcnTooltipProvider, and the dashboard route shown in the stack trace. Confirm the warning's behavior with devtools enabled and disabled; done means the extraneous non-props warning no longer appears.

Written by the indexing model from the issue text.

Assessment

Tech stack
nuxt, typescript
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.