如果 npm start 後遇到錯誤..

人品不好的時候
執行 npm start 卻出現錯誤..
NPM start returns error, “There might be a problem with the project dependency tree”

意思就是 該專案中的依賴樹有問題

類似這樣的錯誤

這張圖的意思就是 react app 內要的 webpack 版本是 4.41
但是版本不符合，下方提示中說不要手動去移除或再安裝版本，會產生更多難追蹤的問題

要修理這個依賴樹的問題，依照 1~4 步驟處理

• 先刪掉 package-lock.json(不是 package.json )
• 刪掉現在這個資料夾內的 node_modules
• 在 package.json 中，如果 devDependencies 內有 webpack 則刪除
  
• 重新執行 npm install

如果到這邊還是不行
繼續往下處理
根據 一些討論
npm start returns error there might be a problem with the project dependency
https://github.com/facebook/create-react-app/issues/6120

簡單來說，可能是 User / userName / node_modules 內有 webpack 跟 webpack-cli 的緣故

開啟 terminal
先進到 userName 裡面(default 終端機的位置)

~cd

列出 userName 內的資料夾

ls

這時候應該會看到有個 node_modules，進到裡面

cd node_modules

列出 node_modules 內的所有內容，如果看到 webpack 跟 webpack-cli就砍掉

rm -rf 資料夾名字

如果沒有對應權限，就打開 node_modules 的視窗畫面(要在 node_modules 上一層)

open node_modules

補充： open current dir 的指令為

open .

手動把裡面的 webpack + webpack-cli 或 webpack-dev-server 刪掉
又或是把 userName/node_modules 整個砍掉

然後終端機回到安裝 react app 的資料夾裡
執行

npm start

通常會自動開啟瀏覽器
或是在網址輸入 localhost 3000
當畫面出現旋轉的 react logo 就表示成功

不管怎麼用都無法成功之我想放棄了-殺手鐧

如果不管怎樣都無法成功其實是不想再試了
其實有殺手鐧
就是在資料夾中的 .env 檔案
在內容設定

SKIP_PREFLIGHT_CHECK=true

簡單來說，可以關掉這個錯誤訊息 但是後續可能會有別的問題產生

create react app 常用指令

最後補充一下，在進行編寫 react 專案時常用到的指令

解決完錯誤後，繼續往 React 的世界前進吧！