webpack 打包的 node modules 版本不正確?!

Why dose my webpack bundled file imports modules with wrong version?

Photo by Jilbert Ebrahimi on Unsplash

事情是這樣的，這是不久前才遇到的活生生血淋淋的例子，在 React App 中用了某套 SSR framework，而這框架 (給個代號叫 frameworkA) 用了某 package packageA@1.0.0，但開發上我也需要 packageA 所以裝了最新版的 packageA@6.0.0 ，然後…

TL;DR

先檢查你的 webpack config 中 resolve.modules 有沒有指定了絕對路徑的 node_modules/

NPM 安裝的 dependency 架構有問題?

就在裝了最新的 packageA 後系統就壞了，看了一下 error message 很明顯的是 frameworkA 中 import 進來的 packageA 是後來安裝的新版，於是開始懷疑自己對 npm/nodejs 在裝及讀 modules 的架構跟順序的認知

在幾番仔細確認後，node_modules 裡面裝的 package 版本跟位置都是正確的啊 ( https://docs.npmjs.com/cli/install#algorithm

所以是 webpack 壞了?

又做了點簡單測試後發現 server side 的 frameworkA 在用 packageA 時是吃到正確的版本並能正常運作，而 client side 確實是用到錯版本的 packageA 在執行，但為什麼會這樣呢

花費了一番功夫終於找到這麼一個 issue

Webpack imports wrong version of duplicate dependency · Issue #6538 · webpack/webpack

以及 webpack config resolve.modules

Resolve | webpack

如果你不小心在 resolve.modules 給了絕對路徑的 node_modules

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'node_modules')]
  }
};

如此一來 webpack 在幫你 bundle 時只會從你指定的這個 node_modules/ folder 找 dependencies，但你的 dependencies 架構可能長這樣

your_project
- frameworkA
  - packageA@1.0.0
- packageA@6.0.0

導致 frameworkA 被 bundle 時去拉了 package@6.0.0 來用，就 GG 惹，更慘的是在這個專案中 webpack config 是由另外的 plugin 所產生的，以致更難在第一時間找到可能的原因QQ

先醬，如果你喜歡這篇文章的話可以拍 11 下手，不喜歡的話可以拍 1 下再分享給 5 位朋友，感謝你的閱讀