npm install と yarn add について

現在、Nexe.jsで開発をしております。

そこで、"react-locomotive-scroll": "0.1.8"というパッケージを使っているのですが、package.jsonに"react-locomotive-scroll": "0.1.8"を追記した後、

console
1npm install

を行うとエラーで止まってしまうため、package.jsonから"react-locomotive-scroll": "0.1.8"の記述を削除し

console
1yarn add react-locomotive-scroll@"0.1.8"

を行うと、インストールに成功しました。
ですが、上記の作業でpackage.jsonに"react-locomotive-scroll": "0.1.8"が記述されてしまうため、npm installができなくなってしまいます。

そのため別のnpmを追加する際、

console
1//毎回package.jsonの"react-locomotive-scroll": "0.1.8"を削除し、別のnpmの記述を追加
2npm install
3yarn add react-locomotive-scroll@"0.1.8"

という流れで新しいnpmをインストールしています。

ローカル環境では、手作業で行えばなんとか開発は進められたのですが、本番環境でビルドする際には失敗してしまいます。
npmインストールの仕方や、ビルドの方法で工夫すると解決できそうなのですが、知識がなく困っております。
何か解決策があればご教授いただきたいです。
よろしくお願い致します。

※npm i 時のエラー

console
1npm ERR! code ERESOLVE
2npm ERR! ERESOLVE unable to resolve dependency tree
3npm ERR! 
4npm ERR! While resolving: rudo_next@0.1.0
5npm ERR! Found: locomotive-scroll@4.1.1
6npm ERR! node_modules/locomotive-scroll
7npm ERR!   locomotive-scroll@"^4.1.1" from the root project
8npm ERR! 
9npm ERR! Could not resolve dependency:
10npm ERR! peer locomotive-scroll@"4.0.6" from react-locomotive-scroll@0.1.8
11npm ERR! node_modules/react-locomotive-scroll
12npm ERR!   react-locomotive-scroll@"0.1.8" from the root project
13npm ERR! 
14npm ERR! Fix the upstream dependency conflict, or retry
15npm ERR! this command with --force, or --legacy-peer-deps
16npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
17npm ERR! 
18npm ERR! See /Users/user/.npm/eresolve-report.txt for a full report.
19
20npm ERR! A complete log of this run can be found in:

※ビルド用ファイル（AWSのamplifyを使用しています）

amplify.yml
1version: 0.1.0
2frontend:
3  phases:
4    preBuild:
5      commands:
6        - npm update
7        - npm ci
8    build:
9      commands:
10        - npm run build
11  artifacts:
12    baseDirectory: .next
13    files:
14      - '**/*'
15  cache:
16    paths:
17      - node_modules/**/*

行動規範の内容に同意します

回答1件

ベストアンサー

npm v7 では peerDependencies を厳密に解釈するようになったため、react-locomotive-scroll のこの部分が問題を起こすようですね。(yarn や古い npm は peerDependencies の解釈がいい加減なので問題が見逃されていました。)
参考: npm v7でERESOLVE unable to resolve dependency tree Could not resolve dependency: - Qiita

正しい解決方法はライブラリの作者に直してもらうことですが、とりあえずの回避手段として古い npm の挙動に戻すには、上の記事の通り npm install --legacy-peer-deps とするか、プロジェクトディレクトリに .npmrc というファイルを作って次のように書くと良いでしょう。
参考: Configure --legacy-peer-deps with .npmrc · Discussion #283 · npm/rfcs