React中 npm start出现问题的情况解决

Posted 2023-04-23

参考技术A 前言：发文章只是为了记录自己遇到的坑，为以后遇到问题时能够回过头来看一看。所以写的会有点LOW。、

- `cnpm install -g create-react-app` 安装react的脚手架 ,用`cnpm` 是因为`npm`太慢了。

- `create-react-app helloreact` 新建一个名为`helloreact`的项目，它会自动帮你装好依赖。注意名字不要有大写字母。

- `npm start`或者 `yarn start` 启动

此时，会出现问题。不能识别`react-scripts start`。你可以`npm install`一下，安装配置。

如果还有问题，

1. 则把位于你react文件根目录下的 `yarn.lock`文件删除。

2. 在`package.json`文件下，把版本改为"react-scripts": "2.1.8" 这个版本。

3. 接着把`node_modules`文件删除。`npm install` 重新安装一遍。

4. npm start 可以跑起来了。

问题出在`react-scripts` 的版本有问题。改为2.1.8版本就可以了。

在 React 应用程序中运行 npm start 时出现 babel-jest 依赖问题

【中文标题】在 React 应用程序中运行 npm start 时出现 babel-jest 依赖问题

【英文标题】：Issue with babel-jest dependency when running npm start in a React app

【发布时间】：2019-04-04 23:02:10

【问题描述】：

我正在做的只是运行 create-react-app 并 cd'ing 进入应用程序，然后尝试运行 npm/yarn start。我收到以下错误/输出/日志。我已经完成了所有建议的步骤。唯一有效的是我的 .env 中的 SKIP_PREFLIGHT_CHECK=true 作为两者的最后手段 纱线和 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

【参考方案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 开发服务器运行而无需跳过预检。

【讨论】：

非常感谢。就像你说的，也许不是 正确的 方式，但对我有用。再次感谢。

我遇到了 OP 中报告的这个确切错误，并遵循了上面这个确切的建议。我不得不以同样的方式删除另外 1 个模块 (rm -rf ~/node_modules/webpack) ...然后我的应用程序以 yarn start 启动。

此解决方案不被接受，因为在每个新的 npm 安装问题仍然存在之后。虽然是一个很好的解决方法，但不是解决方案。

我尝试了上述所有方法，https://blog.travis-ci.com/2014-08-14-new-cache-ui/ 也很有帮助。我在travis文件里加了travis cache --delete

【参考方案2】：

如果运行应用程序的文件夹的父目录中存在 node_modules，则可能会出现此问题。我通过删除 node_modules 目录解决了这个问题。

【讨论】：

这是我的情况

我也遇到了这个问题，但删除父目录不是一个选项。通过确保两个目录中的 babel-jest 和 jest 是相同的版本，我能够通过它。

这也是我的情况。谢谢！

父目录不包含node_modules目录还是有问题

我读到这篇文章时的想法是“这太愚蠢了，这不可能是解决方案。”两秒钟后，我又回来投票了。

【参考方案3】：

我也遇到了类似的问题，并且能够按照以下步骤解决问题。

在你的项目根目录下创建一个.env文件并添加如下语句

SKIP_PREFLIGHT_CHECK=true

保存文件

移除 node_modules、yarn.lock、package.lock

然后用

重新安装node_modules

npm 安装

这应该可行

【讨论】：

我最近更改了我的 .env 文件并且没有 SKIP_PREFLIGHT_CHECK=true，重新添加它有助于解决这个问题。我不需要做任何删除，只需在更改 .env 后重新启动应用程序即可。另一个解决方法是从主目录中删除罪魁祸首模块，即全局安装，但是，随着时间的推移，随着时间的推移，你使用全局工具使用 deps，问题又回来了

就我而言，不需要删除 node_modules 或 .lock 文件。刚刚添加了带有 SKIP_PREFLIGHT_CHECK=true 的 .env 文件就可以了

【参考方案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

【讨论】：

目前，这似乎是唯一可行的解​​决方法。我将它与yarn cache clean 一起使用并删除了node_modules + yarn.lock

同意，同样的问题出现在 create-react-app 3.0 中。我使用解决方法来解决问题。如果哪位大神能解决这个问题，请分享。

create-react-app 3.0.1 现已发布，似乎已修复。所以一个解决方案可以是运行yarn upgrade --latest create-react-app。

在我安装 react-chessground 后，我开始使用最新的 create-react-app 4.0.3 遇到这个问题：/.

【参考方案5】：

我遇到了这个问题，终于轻松解决了。 可能你知道，当我们使用 create-react-app 时，Jest 是默认配置的，你不需要安装 Jest（当我们使用 Webpack 时，我们可以安装 Jest）。所以，如果你使用 Create-react-app 并错误地安装了 Jest：

首先卸载它（记住如果你使用：（npm install --save-dev jest），你可以直接从Package.json中删除jest或者使用：（npm uninstall --save-dev jest） 删除 package-lock.json（不是 package.json） 删除节点模块 npm install

现在您不会收到错误消息，您可以轻松使用：(npm start) 或 (npm test)

另外，值得一提的是，我安装了以下工具来在 React 组件中编写我的测试： (npm install --save-dev enzyme enzyme-adapter-react-16 jest-enzyme) 并用玩笑和酶写了我的测试。然后我轻松使用：(npm test)

祝你好运！

【参考方案6】：

好的，我在尝试了一切之后终于找到了解决方案。这是最终奏效的方法：

首先，从头读取cmd中的错误信息。他们会告诉你是什么模块导致了问题。您的计算机上可能安装了旧版本。示例：babel-jest 版本 2.4.4 转到您的 Node.js 文件夹 c:/Users/(your user)/node_modules 并找到该模块并将其删除。 回到 cmd 并运行 npm start。你可能会得到同样的错误。但这将用于不同的模块。只需以相同的方式删除它并重复直到它运行。

【讨论】：

我尝试过的其他方法都不起作用，但这在 Windows 10 上成功了。如果在本地重新安装软件包不起作用，请使用它！

【参考方案7】：

运行： npm ls babel-jest

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

这意味着使用 diff 版本安装 tow babel-jest

运行：npm uninstall babel-jest@24.8.0修复我的问题

【参考方案8】：

我通过从高于项目根目录的文件夹中删除 node_modules 文件夹和 package-lock.json 文件解决了这个问题。我不小心在更高的文件夹中安装了 node_modules。

我有：

desktop/code/node_modules（删除此以修复） desktop/code/package-lock.json（删除此修复） 桌面/代码/项目/node_modules 桌面/代码/项目/package-lock.json

【参考方案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 以及 node_modules服务器，再次 npm 安装，一切顺利！

【参考方案10】：

我遇到了完全相同的问题。 我尝试的是在包含 node_modules 文件夹的目录之外创建反应应用程序。 之后，用 yarn start 启动应用，就没有报错了。

【参考方案11】：

我遇到了同样的问题，我解决了这个问题。出于某种原因，因为我本地的 node_modules 。我删除了 babel-jest & jest。之后，npm start。我不确定这是否解决了错误，但这对我来说是正确的。

【参考方案12】：

我通过删除我不小心安装在用户根目录中的 node_modules 文件夹和 package-lock.json 文件解决了这个问题。

对于 Mac 中的我来说，路径是：

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

我发现在终端上运行 npm ls babel-jest 可能是问题所在。这向我表明，树上还有另一个通天塔。

删除这两个后，我在我之前删除 node_modules 文件夹和 package-lock.json 的应用程序中执行了 npm install。

现在运行正常！

【参考方案13】：

我通过删除项目目录中的 node_module 文件夹解决了这个问题

【参考方案14】：

试试这个命令，看看哪些包会在版本中产生冲突。

npm ls babel-jest

将有冲突的软件包替换为该软件包的更新版本。

【参考方案15】：

我尝试了上面所有的书面解决方案。但他们都没有工作。 我通过删除“C:\node_modules”文件夹解决了问题。 然后删除项目 node_modules 和 package-lock.json。最后， npm install 并重新开始。它奏效了。

【参考方案16】：

我的 react-scripts 版本是4.0.3。安装私有远程包后突然出现问题，该包在我的项目根目录node_modules中安装了多个babel包。我通过在项目根级别显式安装有问题的包来解决这个问题，以便它们与预检中报告的版本相匹配。

在我的情况下，以下添加修复了它。您需要的软件包和版本可能会有所不同，您必须检查预检报告。

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

对我来说，它仍然是一种解决方法，但我更喜欢这种方式，而不是像 https://***.com/a/53093421/4840661 中建议的那样手动删除 node_modules 中的某些内容。

【参考方案17】：

在 netlify ci 中出现此错误，这是对我有用的修复： 这个方法适用于任何库我得到了 eslint 而不是 babel-jest 的错误。

强制 npm i -s @babel-jest/VERSION --force 显示错误

将 VERSION 替换为错误中显示的任何版本（在本例中为 23.6.0）， 正确的错误信息将在本地显示

使用https://www.npmjs.com/package/npm-check-updates 使用正确的版本升级您的 package.json 文件

安装 npm 包后在 package.json 的目录中运行 ncu -u 全球

终于做一个 npm ci

这将删除 package-lock 和 node_modules 并根据第二步安装新版本

【参考方案18】：

这对我有用。 清除 npm 或 yarn 中的缓存 删除 node_modules 并锁定文件

创建 .env 文件 将“SKIP_PREFLIGHT_CHECK=true”添加到项目中的 .env 文件中。

【参考方案19】：

这是不删除node_modules的方法：

我收到如下错误：

Create React App 提供的 react-scripts 包需要依赖： “笑话”：“26.6.0” 不要试图手动安装它：你的包管理器会自动安装。 但是，在树的较高位置检测到不同版本的 jest：

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

npm ls babel-jest

在我的例子中，输出是这样的：

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

之后卸载 babel-jest bynpm uninstall babel-jest （看到babel-jest的单版，不然就按如下版本）npm uninstall babel-jest@27.0.2

然后使用 npm i babel-jest@version jest@version 安装所需的依赖项 （其中版本是第 1 点）

这对我来说就像一个魅力。希望这也能解决您的问题。

【参考方案20】：

我遇到了类似的问题，浪费了我 2-3 天 解决这个问题最简单的方法是：

1. 跳出 src，创建 .env 文件。 2.在 .env 文件中，只写这一行并保存： SKIP_PREFLIGHT_CHECK=true 3.然后npm启动

希望这会有所帮助，编码快乐！！！

【讨论】：

这个答案不会比其他答案中所说的更多......避免这个以保持这个问题易于阅读。