1. 程式人生 > 實用技巧 >執行react專案,npm run start/build, 報錯 There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.

執行react專案,npm run start/build, 報錯 There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.

如題:這個問題困擾了我半天,網上搜索各種解決方法,都沒能解決,最後仔細讀一遍原因才發現問題很簡單,就是版本不一致

  為啥不一樣,哪裡有兩個相同的依賴呢,請看下文:

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  
"webpack": "4.19.1" Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree: E:\company_work\wbwork\zabbix2\node_modules\webpack (version: 3.10.0) Manually installing incompatible versions is known to cause hard-to-debug issues.

報錯如上所示,不一定是webpack,還是其他依賴檔案版本衝突,如babel-eslint, babel-loader, webpack-dev-server等等,

這個版本衝突是因為react-scripts中重新依賴了一套相同的,坑爹呀,react自行依賴一套了,結果版本不一致導致的。

怎樣看你的專案中是否有相同的依賴

npm ls webpack

如上指令,webpack 可以換成任何同樣報錯的依賴名稱即可查詢

結果:

$ npm ls webpack
adminstock@0.1.0 E:\GitLab\adminstock\web
+-- [email protected]
| `-- [email protected]
`
-- [email protected]

看到了吧,react-scripts 還有相同的一套webapck,但是版本不一樣。

要怎麼改,其實很簡單,

在package.json中,找到react-scirpts,將他的版本號前面的 ^ 這個符號刪掉,然後重新npm install 一下就可以了

^ 符號標識最新版本,不是指你當前寫的版本,大坑呀。

不信的話,你npm install 完,再執行一下

npm ls webpack  檢查版本是不是一樣

$ npm ls webpack
[email protected] E:\GitLab\adminstock\web
+-- [email protected]
| `-- [email protected] deduped
`-- [email protected]

完美解決, 親測