✨

間違えてyarnとnpmを共存させてしまった時の対処法

2024/08/04に公開

TypeScriptやJavaScriptで作業する際に、yarnとnpmを統一せずに使用したときの問題点と対応策をまとめて備忘録として残しておく。

問題点

依存関係の不整合:
npmが管理するpackage-lock.jsonとyarnが管理するyarn.lockが同時に存在すると、どちらのファイルが正しいのか不明確になる可能性がある。
キャッシュの重複:
npmとyarnはそれぞれ異なるキャッシュシステムを使用しているため、同じパッケージが2重にキャッシュされることがある。
依存関係のインストール順序の違い:
npmとyarnで依存関係のインストール順序が異なる場合があり、ツールやライブラリに支障をきたす場合がある。
バージョンの不一致:
npmとyarnで管理する依存関係のバージョンが一致しない可能性がある。

npmを使用してしまったときの対応手順

1. npmでインストールされたReactの削除

まず、ターミナルで以下のコマンドを実行してnpmでインストールされたReact関連のパッケージを削除する。

npm uninstall react react-dom

2. `package-lock.json`の削除

次に、npmで管理されていたpackage-lock.jsonファイルを削除する。これにより、npmの依存関係が完全にクリアされる。

rm package-lock.json

3. `yarn`のインストール

次に、yarnをインストールし直す。

# 公式リポジトリを追加して`yarn`をインストール
curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

4. ReactとReact DOMのyarnでのインストール

Reactを使用している場合、yarnを使ってReactとReact DOMを再インストールする。

yarn add react react-dom

5. TypeScriptを使用する場合の型定義のインストール

TypeScriptを使用している場合は、以下のコマンドでTypeScriptとReactの型定義をインストールする。

yarn add typescript @types/react @types/react-dom

6. 依存関係のインストール

最後に、既存の依存関係をすべてyarnでインストールする。

yarn install

この手順を参考にして、依存関係の管理を統一することができる。