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.
オープン
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 30/100
- issue の種類
- バグ
- 明瞭さ
- 説明が足りない
- 活発さ
- 停滞
- 技術スタック
- nuxt, typescript
調査の方向性
Nuxt DevTools issue 722 のコメントにリンクされている再現手順から始め、DialogRoot、DrawerRoot、ShadcnTooltipProvider、および stack trace に示されている dashboard route を通じて警告を追跡します。devtools の有効時と無効時に警告の挙動を確認します。完了条件は、extraneous non-props の警告が表示されなくなることです。
索引モデルが issue の本文から書いたものです。
説明
bug
🐛 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
- 主要言語
- TypeScript
- スター
- 3.3k
- フォーク
- 214
- 平均マージ
- 19時間 45分
- マージ済み PR（30日）
- 12
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
nuxt/devtools のほかの issue
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
-
bug
難易度 3/5 1〜2日 初心者へのやさしさ 68/100
-
enhancement
難易度 5/5 1週間以上 初心者へのやさしさ 25/100
-
bug needs reproduction
難易度 4/5 3〜5日 初心者へのやさしさ 38/100
似ている issue
-
bug(cli): hapi doctor inline-media prints a fabricated B:\ helper-script path in packaged installs オープン
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
Crush オープン
難易度 1/5 1時間未満 初心者へのやさしさ 85/100
catppuccin/catppuccin#3125 ·
-
Add a SECURITY.md オープン
難易度 1/5 1時間未満 初心者へのやさしさ 90/100
ElementsProject/cln-application#167 · コメント 1 件 · リアクション 1 件 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
Quantco/pnpm-licenses#17 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100