【Vue3】Extraneous non-props attributes (XXX) 〜エラーの原因と対処

ブラウザで警告が出ていた

Vue3で作ったフロントエンドを実行中に下記の警告がブラウザのコンソールに出力されていた。

Extraneous non-props attributes (xxx) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.

表示上は問題ないようだが、本番環境へ上げた時に問題が出る可能性もあったので早めに潰しておくことにした。

推測

該当のプロパティ「xxx」は当初propsを使って子コンポーネントに渡していたが、参照先が複数に渡り、ネストが深いコンポーネントでも参照するので、データストアに同じ内容を持たせて、そちらを参照するように変更していたので、propsは関係がなくなっているはず、、、にも関わらずprops関連の警告が出ているということは修正漏れがあってpropsを使っている部分があるのではないか？

調査

xxxで関連コンポーネントを検索したところ、下記のようになっていた。

まず、親コンポーネントでは下記のように子コンポーネントにpropsを使ってデータを渡していた。

<template>
  <ChildComponent :xxx='data' />
</template>
<script setup>
  const data = ref('hoge');
</script>

しかし、子コンポーネントでは下記のようにdefinePropsをしておらず、渡されたデータを受け取っていなかった。

<template>
  <p>hogehoge</p>
</template>
<script setup>
 // definePropsしていない
</script>

そこで、下記のように親コンポーネントからデータを渡さないようにした

<template>
  <ChildComponent />
</template>
<script setup>
  // dataもデータストアに移行済みなので削除
</script>

これで再実行したところ、警告が消えたことを確認できた。

まとめ

Extraneous non-props attributes (XXX) 〜が出ていたら、該当のpropsを使っているコードを検索し、親子で受け渡しに必要な手続きがされていることを確認する。
そもそも、propsをやめた時はちゃんと親コンポーネント側も修正すること！！