React Native 新手村 : Unable to resolve module ...

Published on:

拓海的好基友阿木說的好:「神原本也是人,但是因為他做到了人做不到的事,他才成了神。」我想,索爾原本也就是個壯碩的普通人,大概就是被好兄弟洛基雷久了才成為雷神。

總之,本篇來談談萬一整個團隊好死不死只有你才遇的到 “Unable to resolve module...” 時該怎麼辦。

相信大家自從一腳踏進 React-Native 這個外太空之後大概沒過幾天好日子,踩地雷、閃流星玩久了也就聞得到這次踩什麼是碗糕(才怪)。

問題

“Unable to resolve module...” 有很多可能,本篇僅就我遇到的狀況進行解決。通常訊息會類似以下畫面,而且會附帶一些奇怪的情況,例如:React Packager console 視窗中永遠都不 transform 任何 code。

以最近這陣子的臥薪嘗膽,問題通常可能是以下原因:

  1. 有 module 在 npm install 過程中安裝失敗
  2. npm install 過程中斷線
  3. 作者忘了在 package.json 中加入 module 關聯
  4. 沒有目的資料夾存取權限
  5. npm version < 3

本文忽略 5 這個超人般華麗的錯誤,請自行安裝 npm3。同時此錯誤畫面會引入此一討論串:NPM modules get required from /Users/node_modules/ instead of the project directory #4968,但對我來說幫助有限。

至於 3 則是可以透過以下方式手動安裝缺漏的 module,同時寫入 package.json:

npm install --save module_name

不過沒有關係,指引中三個步驟仍能有效解決大多數問題。BUT!人生最重要的就是這個BUT!如果整個團隊好死不死只有你遇的到這個問題時,這些步驟大概也通通無效。

好吧!那怎麼辦?當我在茫茫 google 海中尋求索爾的慰藉時,我看到了本文底下 Refs 中某篇回覆提到他的 React-Native Sample 跑不起來,最後他狠下心來下了 sudo npm install 就立馬見效。看到這裡我有如五雷轟頂,心底如有一陣靈光衝破天靈蓋!隨即肩頭一鬆,痰,就這樣咳了出來。

為什麼需要 sudo 才能成功?因為資料夾存取權限不足呀!請照以下步驟服用,保證藥到命不除,最多返回原點。

  • 更改資料夾擁有者,請務必注意資料夾位置

    sudo chown -R $USER PROJECT_FOLDER
    
  • 如果你有使用 watchman,Clear watchman watches.

    watchman watch-del-all
    
  • 清除 npm 快取

    rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache
    
  • 重新跑一次安裝流程,Delete the node_modules folder

    rm -rf node_modules && npm install
    

走到這邊應該就能再次看到 React Packager 快樂的 transforming 了。恭喜螢幕前的你,再次戰勝了淘氣的洛基。

本篇獲頒雷神索爾勳章一枚。

如果沒有解決你的問題,也歡迎留言討論。

Refs

Comments

comments powered by Disqus