npm: react运行时报错npm start — babel-eslint 版本兼容性问题

Posted 2021-03-17 ostrich-sunshine

最近：

$ 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:

  "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_workwbworkzabbix2
ode_moduleswebpack (version: 3.10.0)

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 "webpack" from dependencies and/or devDependencies in the package.json file in your project fo
lder.
  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 ver
sions.

  6. Check if E:company_workwbworkzabbix2
ode_moduleswebpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

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

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!

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

 

一、报错截图

报错

二、分析报错内容

图1中的报错信息，主要说的是如下：

这不是create React App时的错误，而是需要在本地修复的问题。
由create React App提供的React 脚本包需要安装依赖项。
"babel-eslint": "9.0.0"
不要尝试手动安装：包管理器会自动安装。
然而，在树的高处发现了不同版本的Babel Eslint。
已知手动安装不兼容的版本会导致难以调试的问题。
如果希望忽略此检查，请将skip_preflight_check=true添加到项目中的.env文件中。
这将永久禁用此邮件，但您可能会遇到其他问题。
若要修复依赖关系树，请尝试按正确的顺序执行以下步骤：
【1】删除项目中的package-lock.json（不是package.json！）和/或 yarn.lock 文件。
【2】 删除项目文件夹中的node_modules。
【3】从项目文件夹中package.json文件的devdependencies中删除“babel eslint”
【4】运行npm install 或 yarn，取决于您使用的包管理器。在大多数情况下，这应该足以解决问题。
如果这没有帮助，您可以尝试其他一些方法：
【5】如果使用了NPM，请安装yarn（http://yarnpkg.com/）并用它重复上述步骤。这可能会有所帮助，因为NPM已经知道包提升的问题，在将来的版本中可能会得到解决
【6】检查/users/hmly/desktop/react/xiang shou jiu da ka/node_modules/babel eslint是否在项目目录之外。
例如，您可能意外地在主文件夹中安装了某些内容。
【7】尝试在项目文件夹中运行npm ls babel eslint。这将告诉您安装了babele eslint的其他包（除了预期的react脚本）
如果没有其他帮助，请将skip_preflight_check=true添加到项目中的.env文件中。

这将永久性地禁用这个飞行前检查，以防您仍然想继续

三、错误处理

  按照2中的前4步处理，发现仍然不能解决该问题。然后尝试了【7】的方式，发现确实有两个版本的babel-eslint ，想起之前确实手动安装过babel-eslint ，应该是这个问题。
  再次进行处理：
   1、 删除项目中的package-lock.json文件（不是package.json）。
   2、 删除项目中的node_modules文件夹。
   3、 修改package.json ,把"devDependencies"配置清空，关键。

 

删除前

 

 

删除后

   4、 重新运行 npm install 。
   5、运行 npm start 成功 ，（后期可根据需要重新配置devDependencies）。

链接：https://www.jianshu.com/p/b37f127f69e1