在 React 應用程序中運行 npm start 時出現 babel-jest 依賴問題

Question

我所做的只是運行 create-react-app 並 cd'ing 進入應用程序，然后嘗試運行npm/yarn start 。 我收到以下錯誤/輸出/日志。 我已經完成了所有建議的步驟。 唯一有效的是我的 .env 中的 SKIP_PREFLIGHT_CHECK=true 作為 Yarn 和 npm 的最后手段。 我最近更新到 Mojave，如果人們有類似的經歷，我必須重新安裝我的 Xcode。

Last login: Tue Oct 30 16:30:24 on ttys002
TheLAB11:~ jasonspiller$ cd repos/react-express-graphql-app/
TheLAB11:react-express-graphql-app jasonspiller$ npm start

> react-express-graphql-app@0.1.0 start /Users/jasonspiller/repos/react-express-graphql-app
> react-scripts start


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:

  "babel-jest": "23.6.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:

  /Users/jasonspiller/node_modules/babel-jest (version: 23.4.2) 

Manually installing incompatible versions is known to cause hard-to-debug issues.

If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/jasonspiller/node_modules/babel-jest is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls babel-jest in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed babel-jest.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-express-graphql-app@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-express-graphql-app@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/jasonspiller/.npm/_logs/2018-10-30T23_09_42_358Z-debug.log

Answer 1

我只是有同樣的問題。 由於某種原因，該軟件包最終位於我的主目錄中的node_modules目錄中。 對於jest包，它也給了我完全相同的錯誤。

我不確定解決此問題的正確方法，因為npm uninstall -g babel-jest和yarn global remove babel-jest不做任何事情。

我通過刪除導致問題的文件夾來修復它： bash rm -rf ~/node_modules/babel-jest ~/node_modules/jest

很高興知道這些包是如何結束的，以及擺脫它們的正確方法，但現在只需刪除文件夾就足以讓 CRA 開發服務器運行而無需跳過預檢檢查。

Answer 2

如果運行應用程序的文件夾的父目錄中有 node_modules，則可能會出現此問題。 我通過刪除 node_modules 目錄解決了這個問題。

Answer 3

我也遇到了類似的問題，並且能夠按照以下步驟解決問題。

1. 在你的項目根目錄中創建一個 .env 文件並添加以下語句

SKIP_PREFLIGHT_CHECK=真

2. 保存文件

3. 移除 node_modules、yarn.lock、package.lock

4. 然后重新安裝 node_modules

npm 安裝

這應該工作

Answer 4

該問題似乎在 create-react-app 3.0.0 中再次出現。

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

  "babel-jest": "24.7.1"

正如 abisuq 在https://github.com/facebook/create-react-app/issues/6756#issuecomment-489562571中指出的那樣，在package.json 中添加版本分辨率暫時解決了問題。

"resolutions": {
  "babel-jest": "24.7.1"
},

---

更新：它已在create-react-app 3.0.1中修復。 如果升級是一個選項，您可以運行

npm install --save --save-exact react-scripts@3.0.1

或者

yarn add --exact react-scripts@3.0.1

Answer 5

1. 運行： npm ls babel-jest

得到：安裝了 babelk-jest@24.7.1 & babel-jest@24.8.0

這意味着使用 diff 版本安裝 tow babel-jest

2. 運行： npm uninstall babel-jest@24.8.0修復我的問題

Answer 6

我遇到了這個問題，終於輕松解決了。 可能你知道，當我們使用 create-react-app 時，Jest 是默認配置的，你不需要安裝 Jest（當我們使用 Webpack 時，我們可以安裝 Jest）。 因此，如果您使用 Create-react-app 並錯誤地安裝了 Jest：

1. 首先卸載它（請記住，如果你使用：（ npm install --save-dev jest ），你可以直接從 Package.json 中刪除 jest 或使用：（ npm uninstall --save-dev jest ）
2. 刪除 package-lock.json（不是 package.json）
3. 刪除 node_modules
4. npm install

現在您不會收到錯誤消息，您可以輕松使用：(npm start) 或 (npm test)

另外，值得一提的是，我安裝了以下工具來在 React 組件中編寫我的測試：（ npm install --save-dev enzyme enzyme-adapter-react-16 jest-enzyme ）並使用 jest 和酶編寫我的測試。 然后我很容易使用：（ npm test ）

祝你好運！

Answer 7

好的，我在嘗試了一切之后終於找到了解決方案。 這是最終奏效的方法：

• 首先，從頭開始閱讀cmd中的錯誤信息。 他們會告訴你是什么模塊導致了問題。 您的計算機上可能安裝了舊版本。 示例：babel-jest 版本 2.4.4
• 轉到您的 Node.js 文件夾 c:/Users/(your user)/node_modules 並找到該模塊並簡單地刪除它。
• 返回 cmd 並運行 npm start。 你可能會得到同樣的錯誤。 但這將用於不同的模塊。 只需以相同的方式刪除它並重復直到它運行。

Answer 8

我通過從高於項目根目錄的文件夾中刪除 node_modules 文件夾和 package-lock.json 文件來解決此問題。 我不小心將 node_modules 安裝在更高的文件夾中。

我有：

• desktop/code/node_modules（刪除此修復）
• desktop/code/package-lock.json （刪除此修復）
• 桌面/代碼/項目/node_modules
• 桌面/代碼/項目/package-lock.json

Answer 9

我也有這個問題。 當我嘗試使用 npm start 運行客戶端時，會出現錯誤，告訴我它需要 babel-jest: ^24.9.0.

我注意到在我的客戶端中，babel-jest 是 ^24.9.0 版本，但在我的服務器中，我有“jest”：“^26.6.3”。

我所要做的就是在服務器端源代碼中將 "jest": "^26.6.3" 更改為 "jest": "^24.9.0"，刪除我的 package-lock.json 以及服務器 npm 中的 node_modules再次安裝，一切順利！

Answer 10

我有完全相同的問題。 我嘗試的是在包含 node_modules 文件夾的目錄之外創建反應應用程序。 之后，使用 yarn start 啟動應用程序，不再出現錯誤。

Answer 11

我有同樣的問題，我解決了這個問題。 出於某種原因，因為我本地的 node_modules 。 我刪除了 babel-jest & jest。 之后，npm start。 我不確定這解決的不正確，但這對我來說是正確的。

Answer 12

我通過刪除我不小心安裝在用戶根目錄中的 node_modules 文件夾和 package-lock.json 文件解決了這個問題。

對於 Mac 中的我來說，路徑是：

Macintosh HD -> 用戶 -> “我的用戶名”

我通過在終端上運行 npm ls babel-jest 發現這可能是問題所在。 這向我表明，樹上還有另一個巴別塔。

刪除這兩個后，我在我的應用程序中執行了 npm install，我之前刪除了 node_modules 文件夾和 package-lock.json。

現在運行正常！

Answer 13

我通過刪除項目目錄中的 node_module 文件夾來解決這個問題

Answer 14

試試這個命令，看看哪些包會在版本中產生沖突。

npm ls babel-jest

用更新的軟件包之一替換沖突的軟件包。

Answer 15

我嘗試了上面所有的書面解決方案。 但他們都沒有工作。 我通過刪除“C:\node_modules”文件夾解決了問題。 然后刪除項目 node_modules 和 package-lock.json。 最后， npm install 並重新開始。 它奏效了。

Answer 16

我的 react-scripts 版本是4.0.3 。 安裝私有遠程包后突然出現問題，該包在我的項目根目錄下安裝了多個 babel 包node_modules 。 我通過在項目根級別顯式安裝有問題的包來解決這個問題，以便它們與預檢檢查中報告的版本相匹配。

在我的情況下，添加后修復了它。 您需要的軟件包和版本可能不同，您必須檢查預檢報告。

yarn add babel-jest@^26.6.0
yarn add babel-loader@8.1.0

對我來說它仍然是一種解決方法，但我更喜歡這種方式，而不是按照https://stackoverflow.com/a/53093421/4840661中的建議手動刪除node_modules中的某些內容。

Answer 17

這是不刪除node_modules的方法：

• 我收到如下錯誤：

Create React App 提供的 react-scripts 包需要依賴： "jest": "26.6.0" 不要嘗試手動安裝：你的包管理器會自動安裝。 但是，在樹的較高位置檢測到不同版本的 jest：

• 首先使用以下命令檢查版本：

  npm ls babel-jest
  

  在我的情況下，輸出是這樣的：
  

開玩笑@27.0.3
└─┬ @jest/core@27.0.3
└─┬ jest-config@27.0.3
└── babel-jest@27.0.2

• 之后通過卸載 babel-jest
  npm uninstall babel-jest
  （當你看到babel-jest的單一版本時，其他版本如下）
  npm uninstall babel-jest@27.0.2

• 然后使用安裝所需的依賴項
  npm i babel-jest@version jest@version
  （其中版本是第 1 點）

這對我來說就像一個魅力。 希望這也能解決你。

Answer 18

在 netlify ci 中出現此錯誤，這是對我有用的修復：此方法適用於任何 lib 我遇到了 eslint 而不是 babel-jest 的錯誤。

1. 強制 npm i -s @babel-jest/VERSION --force 顯示錯誤

   將 VERSION 替換為錯誤中顯示的任何版本（在本例中為 23.6.0），正確的錯誤消息將在本地顯示

2. 使用https://www.npmjs.com/package/npm-check-updates用正確的版本升級你的 package.json 文件

   全局安裝 npm 包后，在 package.json 的目錄中運行 ncu -u

3. 最后做一個 npm ci

   這將刪除 package-lock 和 node_modules 並根據第二步安裝新版本

Answer 19

這對我有用。 清除 npm 或 yarn 中的緩存刪除 node_modules 並鎖定文件

• 創建 .env 文件
• 將“SKIP_PREFLIGHT_CHECK=true”添加到項目中的 .env 文件中。

Answer 20

我的問題是我有同時運行的前端和后端。 我將 jest 安裝到我的根項目（用於后端），我猜想與pre-installed react jest有沖突。 我剛剛從后端卸載了 jest，瞧，我現在很高興。 我沒有任何與 babel 相關的內容。

Answer 21

• 起初我安裝了這些（我的反應版本是“^17.0.2”）

  1. npm install --save-dev jest

  2. npm install --save-dev 酶酶轉json

  3. npm install @wojtekmaj/enzyme-adapter-react-17

• 之后，我遇到了同樣的問題。
• 然后我做了這些步驟:)
  1. 在我的項目根目錄中添加了“.env”文件並添加：SKIP_PREFLIGHT_CHECK=true
  2. 刪除了 node_modules 和 package.lock

  3. npm 安裝

  4. npm 開始

Answer 22

我有類似的問題，浪費了我的 2-3 天解決這個問題的最簡單方法是：

1. 到 src 之外，創建 .env 文件。 2.在 .env 文件中，只寫一行並保存： SKIP_PREFLIGHT_CHECK=true 3.然后 npm start

希望這有幫助，快樂編碼！