blog.mahoroi.com

@types/reactを更新した

-

TypeScript で書かれた React を使ったプロジェクトに新規ライブラリ追加したら、下のようなエラーが無限に発生しました。

JSX 要素型 'ReactElement<any> | null' は JSX 要素のコンストラクター関数ではありません。
型 'ReactElement<any>' を型 'Element' に割り当てることはできません。
node_modules/@types/react/index.d.ts(2680,13): error TS2717: Subsequent property declarations must have the same type.  Property 'a' must be of type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>', but here has type 'DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>'.
node_modules/@types/react/index.d.ts(2681,13): error TS2717: Subsequent property declarations must have the same type.  Property 'abbr' must be of type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>', but here has type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
...

解決方法

React の@types を更新したらエラー消えました。

更新前

yarn.lock
"@types/prop-types@*":
  version "15.5.5"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.5.tgz#17038dd322c2325f5da650a94d5f9974943625e3"
  dependencies:
    "@types/react" "*"
"@types/react@*":
  version "16.4.14"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.14.tgz#47c604c8e46ed674bbdf4aabf82b34b9041c6a04"
  dependencies:
    "@types/prop-types" "*"
    csstype "^2.2.0"

更新後

yarn.lock
"@types/prop-types@*":
  version "15.5.8"
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.8.tgz#8ae4e0ea205fe95c3901a5a1df7f66495e3a56ce"
  integrity sha512-3AQoUxQcQtLHsK25wtTWIoIpgYjH3vSDroZOUr7PpCHw/jLY1RB9z9E8dBT/OSmwStVgkRNvdh+ZHNiomRieaw==
"@types/react@*":
  version "16.7.18"
  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.18.tgz#f4ce0d539a893dd61e36cd11ae3a5e54f5a48337"
  integrity sha512-Tx4uu3ppK53/iHk6VpamMP3f3ahfDLEVt3ZQc8TFm30a1H3v9lMsCntBREswZIW/SKrvJjkb3Hq8UwO6GREBng==
  dependencies:
    "@types/prop-types" "*"
    csstype "^2.2.0"

yarn のバージョンが違うので、更新後は integrity が追加されています。