疑難排解
npm start
無法偵測變更
在 npm start
執行的同時,當您儲存檔案時,瀏覽器應會使用更新的程式碼重新整理。
如果沒有發生這種情況,請嘗試下列其中一個變通方案
- 檢查您的檔案是由您的入口點匯入的。TypeScript 會顯示您任何原始檔中的錯誤,但 webpack 僅會在您的檔案由您的其中一個入口點直接或間接匯入時重新載入您的檔案。
- 如果您的專案在 Dropbox 資料夾中,請嘗試將其移出。
- 如果偵聽程式看不到稱為
index.js
的檔案,而且您使用資料夾名稱參照它,您需要重新啟動偵聽程式,因為發生 webpack 偵聽程式錯誤。 - 有些編輯器,例如 Vim 和 IntelliJ,有「安全寫入」功能,目前會中斷偵聽程式。您需要停用此項功能。請按照「調整您的文字編輯器」的指示進行操作。
- 如果您的專案路徑包含括號,請嘗試將專案移至沒有括號的路徑中。這是由於webpack 偵聽程式錯誤所造成。
- 在 Linux 和 macOS 中,您可能需要調整系統設定以允許更多監控者。
- 如果專案執行於虛擬機中,例如 (由 Vagrant 自行配置的) 虛擬方塊,則在您的專案目錄中建立一個
.env
檔案(如果不存在),然後將CHOKIDAR_USEPOLLING=true
加入其中。這可確保下一次您執行npm start
時,監控者會使用輪詢模式,這是於 VM 中必須的。
如果這些解決方案都沒有幫助,請在此執行緒中留下意見回饋。
npm start
因監控錯誤而失敗
如果您使用 Linux 作業系統,並看到類似於:ENOSPC: 達到作業系統可監控的檔案數量限制
的錯誤,您可以透過提高作業系統的 fs.inotify.max_user_watches
設定來修正問題。
如果您執行 Debian、RedHat 或其他類似的 Linux 發行版,請在終端機中執行下列命令
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
如果您執行 ArchLinux,請改為執行下列命令
echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system
接著將它貼到您的終端機,然後按 Enter 執行。您可以在這裡找到更多資訊。
npm test
在 macOS Sierra 中卡住或當機
如果您執行 npm test
,而且主控台在印出 react-scripts test
之後就卡住,那就表示如同facebook/create-react-app#713中所說明的,您的Watchman 安裝或許有問題。
我們建議您先刪除專案中的 node_modules
,然後再執行 npm install
(或如果您使用的話,則執行 yarn
)。如果沒有幫助,您可以嘗試這些問題中所提到的其他解決方法
有報告指出,安裝 Watchman 4.7.0 或較新版本可以修正問題。如果您使用Homebrew,則可以執行下列命令來更新它
watchman shutdown-server
brew update
brew reinstall watchman
您可以在 Watchman 文件頁面上找到其他安裝方法。
如果仍然沒有幫助,請嘗試執行 launchctl unload -F ~/Library/LaunchAgents/com.github.facebook.watchman.plist
。
還有報告指出解除安裝 Watchman 可以修正問題。因此,如果其他方法都沒有幫助,請從您的系統中移除它,然後再試一次。
npm run build
過早結束
據報導,npm run build
會在記憶體有限且沒有交換空間的機器上失敗,這在雲端環境中很常見。即使是小型專案,此命令也可能使您系統的 RAM 使用量增加數百 MB,因此,如果您可用的記憶體小於 1 GB,您的建置可能會失敗,並顯示以下訊息
建置失敗,因為程序過早結束。這可能表示系統記憶體不足或有人對該程序呼叫
kill -9
。
如果您完全確定自己沒有終止該程序,請考慮在您正在建置的機器上新增一些交換空間,或在本地建置該專案。
npm run build
在 Heroku 失敗
這可能是大小寫敏感的檔案名稱的問題。請參閱本節。
遺失 Moment.js 本機
如果您使用Moment.js,您可能會注意到預設情況下只有英文本機可用。這是因為本機檔案很大,而且您可能只需要Moment.js 提供的所有本機的子集。
若要將特定的 Moment.js 本機新增到您的套件,您需要明確匯入它。
例如
import moment from 'moment';
import 'moment/locale/fr';
如果您以這種方式匯入多個本機,您稍後可以使用本機名稱呼叫moment.locale()
在它們之間切換
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/es';
// ...
moment.locale('fr');
這僅適用於之前已明確匯入的本機。
npm run build
無法壓縮
在 react-scripts@2.0.0
之前,此問題是由於第三方 node_modules
使用現代 JavaScript 功能,導致壓縮器在建置期間無法處理它們。已透過在 react-scripts@2.0.0
及更高版本中編譯 node_modules
內部的標準現代 JavaScript 功能來解決此問題。
如果您看到此錯誤,您可能正在使用舊版的 react-scripts
。您可以透過避免使用具備現代語法的依賴項,或升級到 react-scripts@>=2.0.0
並遵循變更日誌中的遷移說明來修復此問題。