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.

[jonasfroeller]

🐛 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

#722 (comment)

🌈 Expected behavior

No warning, if I do not have devtools enabled.
No warning at all, since this should be fixed (#722 (comment)).

ℹ️ 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: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

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

[jonasfroeller]

I will try to reproduce this in stackblitz, but I do not have much time rn.
Update: I do not get the warning on my laptop.
The only thing different, is the newer pnpm version.

---

• 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: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

I guess that is actually the fix. Upgrading pnpm. :/
It seems to work in [email protected]. I didn't change anything else.

[webfansplz]

Hi @jonasfroeller, could you still meet this issue in the latest version?

[jonasfroeller]

@webfansplz

I just tried the newest Nuxt version (using npx nuxi upgrade, v3.14.1592) using npm. The devtools work with npm.

I tried pnpm and I stepped away for a few minutes to grab something to eat, and when I came back, the install had crashed. I encountered a new error, which seems odd to me.

[15:48:16]  ERROR  require() of ES Module D:\xxx\node_modules\.pnpm\u[email protected][email protected][email protected][email protected][email protected][email protected][email protected]_\node_modules\unplugin-vue-router\dist\chunk-6F4PWJZI.js not supported.
chunk-6F4PWJZI.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead either rename chunk-6F4PWJZI.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in \\?\D:\xxx\node_modules\.pnpm\u[email protected][email protected][email protected][email protected][email protected][email protected][email protected]_\node_modules\unplugin-vue-router\package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

 ELIFECYCLE  Command failed with exit code 1.

  at TracingChannel.traceSync (node:diagnostics_channel:315:14)
  at async loadNuxt (/D:/xxx/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@nuxt/kit/dist/index.mjs:2632:37)

[Iran-110]

@jonasfroeller
Did you use the :deep(...) pattern in the css section of your vue files? (see this link)
The combination of deep and a dialog manager implemented with fragments or teleports may lead to this error.

[jonasfroeller]

@Iran-110 Yes. A few times. Is there any other solution instead of making that part global?