【ESLint】「’○○’ is missing in props validation」エラーの対処方法

昨日に引き続き、ESLint を導入した際に発生したエラーの対処方法についてです。
React Native のプロジェクトに ESLint を導入し、実行したところ、タイトルにある通り「’○○’ is missing in props validation」というエラーが発生しました。

 

コードの修正にあたり、参考にさせていただいた記事はこちら。

javascript – React eslint error missing in props validation – Stack Overflow
https://stackoverflow.com/questions/38684925/react-eslint-error-missing-in-props-validation

どうやら prop-types を使って親コンポーネントから子コンポーネントに値を渡しているのですが、一部の値でその定義を記述し忘れているのが原因のようでした。
そのため、エラーが発生している箇所のコードを修正していったのですが…よく見ると、React Navigation のコードの this.props.navigation.push("mypage"); のコードもエラーになっていることが判明しました。

これを全部修正するのは面倒すぎる…!ということで、このエラーは無視することにしました。
このエラーを無視するように設定するには、.eslintrc.js ファイルに下記を追加するだけです。

module.exports = {
  ......
  "rules": {
    "react/prop-types": "off",
  },
  ......
}

rules の項目に "react/prop-types": "off" を追加します。
この状態で、ESLint を実行すると、prop-types に関連したエラーは表示されなくなりました!

ESLint は便利なのですが、ここまで厳密にしなくても…と思う時があるので、その際は様子を見ながら、不要なチェックは無効にしてしまいましょう。

 

以上、ESLint の実行時に「’○○’ is missing in props validation」エラーが表示されるときの対処方法についてでした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG