昨日に引き続き、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」エラーが表示されるときの対処方法についてでした。
ご参考になれば幸いです。