1. 結論: 在依賴包和主包的node-modules中,同時install包含react , react-dom 或者react-redux時,跑測試或者啟動的時候,顯示如下error。當然出現這個錯誤的原因還有以下可能:
2. 為什麼會同時引入多個react,react-dom 引發衝突呢?
1. 刪除了package-lock.json檔案,導致下載包的順序和npm倉庫地址不確定。
2. 刪除了主專案的nodel-modules,或者去拉一個新的專案時,沒有存在歷史了的react 版本,使這個問題暴露出來。
3. 依賴專案裡沒有使用 peerDependencies(peerDependencies會提升依賴包的依賴到主專案的依賴中,避免衝突和重複)。
4. 在下載包的時候,如果沒有下載 react 先下載了依賴包,依賴包就會根據自己pack.json裡的dependencies去下載react,這個react只給自己使用。
5. 由於主專案也需要react,所以就同時install兩個react依賴, 依賴包優先使用自己node-modals裡的依賴,主包使用自己node-modals裡的依賴,執行時或者測試時,產生衝突。
3. 解決辦法:
1. 新增 package-lock.json
2. 使用 peerDependencies在子專案中, 將主專案會複用到的react react-dom等,都放到peerDependencies中,避免衝突。
3.如果只是在本地跑的話,可以使用 'npm link main/nodal-modals url' 關聯到主分支,進行除錯,再使用 ‘npm unlink main/nodal-modals url’ 解除關聯。
4. 拓展其它
1. npm3開始,採用扁平化依賴的方式,來解決依賴包巢狀太深或者不同包引入react衝突的問題,將所有的依賴都放到node-modules裡,但是會存在依賴包結果不穩定,存在非法訪問等問題。
2. 使用 pnpm 依賴管理(將包本身和依賴放在同一個node-modules裡,依賴地址採用相對地址的方式),解決依賴提升問題,優化效能。
3. 使用 dependency-check 解決npm/yarn依賴提升問題。