yarn.lockに複数のバージョンが存在する問題の回避方法

社内にあったプルリクエストを見て参考になったのでここに備忘録を書く。

問題

1. TypeScritptを使用しているプロジェクトで、すでにReactがインストールされている

2. Reactのバージョンアップを実行

   yarn add react@latest -S yarn add react-dom@latest -S

バージョンアップは問題なく実行できるが、tsc実行時に大量のエラーが発生するようになった。

Argument of type 'ComponentClass<Props, any>' is not assignable to parameter of type '"tspan"'.

原因

yarn.lockの差分を見ると、@types/react@* と@types/react@^16.7.6という2つのセクションに分かれていた。

解決

yarnでは、"resolutions"でバージョンを固定することで、yarn install時に自動的にバージョンを統一できる。

Yarn

package.jsonの"resolutions"にバージョンを指定することで固定させる。

"resolutions": {
  "@types/react": "16.7.6",
  "@types/react-dom": "16.0.9"
},

この状態でnode_modulesを一度削除し、yarn installし直すと、インストールされた@types/reactが混在しなくなり、エラーは発生しないようになった。