0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

「動かない!」NPMのバージョン衝突をoverridesで解決し、安定した開発環境を手に入れる方法

0
Posted at

NPMプロジェクトでネストされた依存関係のバージョン競合によりビルドやインストールが失敗するトラブルは、npm v8.3.0以降の overrides フィールドを用いて強制的にバージョンを統一することで解決できます。

何が起きたか(発生した症状と原因)

  • ローカル環境では動作するが、CI/CD環境などでビルドやインストールが失敗する。
  • パッケージAが依存するパッケージBが、古いまたは脆弱性のあるサブ依存ライブラリ(例: Package X@1.0)を内部で要求している。
  • プロジェクトルートで新しいバージョンを指定しても、ネストされた依存関係には自動適用されず、予期せぬ競合エラーが発生する。

どう解決したか(基本手順とコマンド)

package.json に overrides フィールドを追加し、対象となるパッケージのサブ依存関係を上書きします。ルートのバージョンを参照する "$パッケージ名" 構文の利用が推奨されます。

{
  "name": "myproject",
  "devDependencies": {
    "typescript": "~4.6.2",
    "awesome-typescript-loader": "^5.2.1"
  },
  "overrides": {
    "awesome-typescript-loader": {
      "typescript": "$typescript"
    }
  }
}

👉 Yarnやpnpmにおける類似機能の使い分けや、メジャーバージョン超過時の実行時エラーを防ぐための注意点を確認するにはこちら。
「動かない!」NPMのバージョン衝突をoverridesで解決し、安定した開発環境を手に入れる方法

対策後の効果(Before / After)

  • Before: サブ依存関係のバージョン競合やCI/CD環境でのビルド失敗に悩まされ、古い package-lock.json の手動編集など不安定なワークアラウンドに依存していた。
  • After: package.json の overrides によりバージョン管理が一元化され、公式機能として安全かつ透明性高く依存関係の競合を解消できる。

🚀 完全なコード・環境別の詳細手順はこちら

Yarnやpnpmの同等機能との比較表や、直接バージョンを指定する記述方法、導入時のリスクを回避するためのチェックリストをまとめています。

👉 「動かない!」NPMのバージョン衝突をoverridesで解決し、安定した開発環境を手に入れる方法

※本記事は技術ブログ CodeArchPedia.com の執筆記事から要点を抜粋した技術ノートです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?