---
# System prepended metadata

title: IT 鬼故事 - 套件依賴導致頁面異常
tags: [yarn, Work]

---

# IT 鬼故事 - 套件依賴導致頁面異常

整理一下發生問題到解決問題的經過：

1. PM 反應早上看到新頁面正常運作，下午整頁看不到任何東西。
2. 檢查線上的新頁面，顯示 **TypeError**，問題報錯顯示在該頁 **vue-condition-watcher** 初始化的段落。
3. 在本地跑一次 `yarn build` 配合 live-server 檢查新頁面，顯示正常無任何異狀。
4. 將問題和發現的線索具體描述給其他同事，大家一起討論。發現另一個同事也在其他產品用到 **vue-condition-watcher** 的地方出現相同問題。
   ![TypeError](https://i.imgur.com/Vm5BHZH.jpg)

5. 鎖定問題可能出在部署時的 **node** 版本和 **vue-condition-watcher** 的依賴，嘗試在本地用 nvm 降版本跑 `yarn install`，結果爆出 **vue-demi** 版本跟目前運行 **node** 不兼容的訊息。
   ![Dependencies warning](https://i.imgur.com/gdyxtWA.png)

6. 看 **vue-demi** 的 repo 最近的 commit 發現 engines 裡的 **node** 變成 >= 12，然後檢查 **vue-condition-watcher** 的依賴發現 **vue-demi** 是用 latest，茅塞頓開。
   ![](https://i.imgur.com/L12cNey.jpg)

7. 和全體同事討論要升專案的版本還是 **vue-condition-watcher** 做一個兼容版本，最後考慮現在常用的套件普遍依賴 **node** >= 12 ，先將開發環境的 **node** 升級結案。

### 結論

開發套件請小心使用 latest 這個標籤，怕。

###### tags: `Work` `yarn`
