チーム開発してる Next.js のプロジェクトで ページのコンポーネントの型を PageComponent: NextPage<PagePropsType> = ({ property }) => {} と書くと 'property' is missing in props というエラーが表示されると報告があり調べてたメモ
環境
- Next.js
13.2.1 - eslint
^8.34.0 - typescript
4.9.5
状況
- Next の PageComponent:
PageComponent: NextPage<PagePropsType>=> ESLint のエラーになる - Next 上で React のコンポーネント:
Component: FC<PropsType>=> ESLint のエラーにならない
結論: カスタマイズされていた eslint の設定に Next.js の推奨設定が入ってなかったのが原因だった
.eslintrc.js
{
- extends: [
- "eslint:recommended",
- "plugin:react/recommended",
- "prettier",
- ],
- plugins: ["react"],
+ extends: ["next/core-web-vitals", "prettier"]
+ plugins: [],
}
Next.js にデフォルトで用意されている eslint-config-next には eslint-plugin-react, eslint-plugin-react-hooks, eslint-plugin-next が含まれるので react 関連は削除してしまう。 eslint:recommended は残しておいても良いと思うが Next がおすすめの設定を用意してくれているのでそれに乗っかって必要な箇所は rule 付けすれば良いかなという判断をしました
NextPages の型
export type NextPage<Props = {}, InitialProps = Props> = NextComponentType< NextPageContext, InitialProps, Props >
NextPagesの型は上記のようになっており props の型をジェネリクス (Generic) で書くことは問題無さそう
'property' is missing in props エラーについて
上記のエラーは react/prop-types に依るもので、React でも Arrow 関数でジェネリクス (Generic) を使った場合にこのルールで引数の型がエラーになっていた issueがあったが既に修正されていた。
この修正はあくまで React の FC や VFC に対するものだったので FC<PropsType> は問題なく Next.js の NextPage<pagePropsType> でエラーが出ているという状況だった
cf.
- (react props) is missing in props validation ERROR · Issue #2777 · jsx-eslint/eslint-plugin-react · GitHub
- [Fix] `prop-types`, `propTypes`: handle React.* TypeScript types by vedadeepta · Pull Request #3049 · jsx-eslint/eslint-plugin-react · GitHub
感想
エラーが出ているという状況だったので、react/prop-types のルール設定の問題かな〜と GitHub の issue を見てコードまで見に行って調べてたのですが、蓋を開けてみたらカスタマイズされていた ESLint の設定が Next.js 用ではなく React 用になっていたというオチでした。
途中から参加したプロジェクトの設定まわりで問題が起こった時、まだ初期段階ならクリーンな環境を作って設定ファイルの違いを見る事から始めた方が近道そうです… (2時間くらい溶かした…)
おわり
[参考]
