🦁

but has no corresponding defaultProps declarationが出てるときの対処法

2024/02/13に公開
propType * is not required, but has no corresponding defaultProps declaration.

上記のようなエラーがVSCode上で出ている場合を指します

これはESLintの設定をしている場合に出ます。
propsに対して?オプショナルを付けている場合、
propsの省略が可能になりますが、値が省略されている場合は値はundefinedになってしまいます。
必須プロップではないすべてのプロップに対して、defaultProps 定義を強制しますというlintの設定がされているため、エラーが出てしまっています。
詳しくはこちらを参考にしてください。

解決方法

解決するには3種類あります。

解決方法1 defaultPropsの設定をしてあげる

以下のようにコンポーネントのpropsに対してdefaultPropsを設定すれば消えます。
私はこちらの解決方法を推奨します。

import React, { FC } from "react"

type Props = {
  text: string
  annotation?: string // ?オプショナルを付けて省略可能にしている
  required: boolean
}

const TestComponent: FC<Props> = (props) => {
  const { text, required, annotation } = props
  return (
    <div className="tw-flex tw-w-full tw-items-center tw-rounded-[4px] tw-bg-default tw-px-[12px] tw-py-[9px]">
      <h4 className="!tw-mb-0 tw-text-[16px] !tw-font-bold">{text}</h4>
      {required && (
        <span className="tw-ml-[10px] tw-rounded-[4px] tw-bg-secondary tw-px-[7px] tw-py-[3px] tw-text-sm tw-text-white">
          必須
        </span>
      )}
      {annotation && <span>{annotation}</span>}
    </div>
  )
}
// デフォルト値を設定(?オプショナルを付与したpropsに対してのみ)
TestComponent.defaultProps = {
  annotation: "",
}

export default TestComponent

解決方法2 設定をオフにする

.eslintrc.json
{
  "plugins": [...],
  "extends": [...],
  "rules": {
    //...その他ルールの記載
    // 引数型に?を付けたときにDefoultPropsが必要なくなる 0:off
    // "react/require-default-props": 0
  }
}

解決方法3 対象コードにのみ設定を無視する

type Props = {
  text: string
  // eslint-disable-next-line react/require-default-props
  annotation?: string
  required: boolean
}

上記のうちどれか設定すればエラーは消えると思います。
1つ目を推奨しますが、チームやプロジェクトによって異なると思うので、相談してみてください。

Discussion