react-create-app 中的 babel 加载器问题

Posted 2023-02-22

【中文标题】react-create-app 中的 babel 加载器问题

【英文标题】：Problems with babel loader in react-create-app

【发布时间】：2019-05-15 01:26:45

【问题描述】：

问题

create-react-app 初始化安装了 babel-loader 的存储库，该版本比需要的旧版本。

日志：

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-loader": "8.0.4"

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

  C:\Users\user\node_modules\babel-loader (version: 8.0.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-loader" 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 C:\Users\User\node_modules\babel-loader is outside your project directory.
         For example, you might have accidentally installed something in your home folder.

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

    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! reg@0.1.0 start: `react-scripts start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the reg@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!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2018-12-13T18_22_47_802Z-debug.log

事情发生后

$ npx create-react-app reg && cd reg && npm start

我尝试过的

我尝试删除node_modules 文件夹和package-lock.json，然后运行npm install。

还安装了yarn并运行yarn && yarn start。

我已经重新创建了该应用 3 次，得到了相同的结果。

可能有用的信息

节点版本：10.8.0 NPM 版本：6.5.0 创建反应应用程序/反应脚本：2.1.1 babel-loader: 8.0.4 全局包列表（npm ls --depth=0 -g）：

+-- create-react-app@2.1.1
+-- node-gyp@3.6.2
+-- npm@6.5.0
+-- yarn@1.12.3

package.json 文件：

  "name": "reg",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  ,
  "eslintConfig": 
    "extends": "react-app"
  ,
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]

【问题讨论】：

在错误信息本身中有一个解决这个问题的说明列表，你试过了吗？

@BoyWithSilverWings 是的。看看“我试过的”部分

第 6 步还是第 7 步？

@BoyWithSilverWings 从 1 到 7

【参考方案1】：

对我来说，通过添加“解决方案”解决了同样的问题： "babel-loader": "8.1.0" //需要的版本 在我的 package.json 文件中。

删除了节点模块、yarn.loack、package-lock.json 纱线开始 效果很好

【参考方案2】：

几年后，同样的问题。

对我来说，解决方案在我的c:/users/myName/node_modules 中。 完全删除该 node_modules，然后重试。

【参考方案3】：

我在使用 babel-loader@8.1.0 时遇到了同样的错误，我从 package.json 中删除了引用，还从 node_modules 中删除了模块并安装了“npm i babel-loader@8.1.0”，但随后引入了 @jest 错误.

我从 node_modules 中删除了 @jest 模块，然后安装了所需的依赖版本，就像我为 babel-loader 所做的那样来解决问题。

【参考方案4】：

在/home/<username>/node_modules/babel-loader 目录中，只需将package.json 文件中的版本更改为“8.0.4”即可。

为我工作

【参考方案5】：

 C:\Users\user\node_modules\babel-loader

从 \user\node_modules 中删除 node_modules 不要从您的项目中删除

如果您使用后端 (nodejs)，请检查您是否在后端使用 webpack 确保你的 create-react-app webpack 和后端 webpack 版本相同

【参考方案6】：

使用以下命令创建应用项目后我也遇到了问题：

create-react-app "project name"
create-react-app "project name" --use-npm
npx create-react-app. 

在所有情况下，结果都是顶部指定的错误：

[项目依赖树可能有问题。它是 可能不是 Create React App 中的错误，而是您需要修复的问题 本地.......][...]

观察错误，一行带有一个小线索：

"/Users/john/node_modules/babel-loader (version: "7.1.5") -> 是一个 与上述指定冲突的版本 - 版本 "babel-loader@8.0.6"

对我来说，解决方案是：按照此路径浏览我的文件夹并删除 node_modules 文件夹，然后重新启动项目。

【参考方案7】：

我遇到了同样的问题。对于任何通过 Google 找到此线程并且是像我这样的初学者的人。这正是在终端中输入的内容（Mac 用户）。

假设你遇到了和 Paul 一样的错误：

"Create React App提供的react-scripts包需要依赖： "babel-loader": "8.0.6"

这是我在终端中输入的内容。我可能是错的，但这对我有用（我也是初学者）：

第 1 步：删除 node_modules 文件夹以及 package_lock.json 文件。

第 2 步：在您的终端中，键入 cd -（我们刚刚离开我们的项目文件夹并进入您的主文件夹）

第 3 步： 在您的终端中输入 npm i "dependency-name@number"，因此对于上面的示例，它将是：npm i babel- loader@8.0.6

第 4 步：现在在您的终端中，导航到您的项目文件夹并输入：npm install 或 yarn install

第 5 步： 尝试运行 npm start，如果所有问题都已解决，它应该会启动开发服务器。

注意：我必须为 babel-loader@8.0.6 以及 Webpack 执行上述过程两次。

【讨论】：

cd - 不会进入您的主文件夹。你的意思可能是cd ~

【参考方案8】：

我遇到了同样的问题。 我通过删除 User/ 中的文件夹 node_modules 和文件 package-lock.json （如果存在）来解决它。 那么它应该可以完美运行。

【参考方案9】：

这意味着你安装了 tow babel-loader

rm yarn.lock
run npm uninstall babel-loader@8.0.4

【参考方案10】：

我遇到了这个问题，刚刚添加了

"babel-loader": "8.0.4",

到我的 package.json 在依赖项中，它似乎解决了问题

【讨论】：

这就是它所说的：不要尝试手动安装它：您的包管理器会自动安装。但是，在树的较高位置检测到不同版本的 babel-loader

【参考方案11】：

但是，在树的较高位置检测到不同版本的 babel-loader：

您应该删除在树的较高位置检测到的 babel-loader 包。输出显示有一个带有 babel-loader 的 node_modules 文件夹。

C:\Users\user\node_modules\babel-loader（版本：8.0.2）

您也可以完全删除 C:\Users\user\node_modules 目录，除非由于某种原因您有一个根植于 /Users/user 中的项目

【参考方案12】：

遇到同样的问题，但要花一个小时才能找到解决方案 当我们运行npm start 时，您会遇到这种与此问题的版本相关问题的错误。 转到 node_modules 文件夹：

Project->node_modules->react-scripts->package.json

检查 package.json 文件

你得到了："babel-loader": "8.0.4" 首先删除：Project->node_modules->babel-loader 的 babel-loader 文件夹 然后运行npm i babel-loader@8.0.4（这取决于您的版本，您可以像这样更改它：npm i babel-loader@8.0.5）之后可能是您遇到了 webpack 问题，然后从“Project->node_modules->webpack”遵循同样的事情 remvoe webpack 并重新安装npm i webpack@4.19.1

4.19.1* webpack 的版本可能会改变..

【讨论】：

2 年后，这仍然是最好的解决方案，尽管我的问题是相反的：babel-loader 和 webpack 的版本太新，而不是太旧。但是，显式安装请求的版本允许 npm start 工作。

您好，感谢您从 2021 年开始。

我就是不明白为什么 package-lock 不能解决这个问题。

【参考方案13】：

在您的项目目录中创建一个.env 文件，并在该文件中包含SKIP_PREFLIGHT_CHECK=true。

【讨论】：

为我解决了。问题是……为什么会这样？这个解决方案到底有什么作用？

不是解决版本冲突的最佳变体。我不需要它只是工作，我需要它正常工作

为什么会这样？什么是 PREFLIGHT_CHECK？

【参考方案14】：

在 Mac 上：

从/Users/<yourusername>/node_modules删除冲突包

【讨论】：

也适用于 linux，只是与某些软件包冲突...谢谢 +rep

酷，它很简单，对我来说效果很好。谢谢

【参考方案15】：

你可以暂时将package.json文件中的react-scripts降级为1.1.5，然后删除node_modules文件夹，如果使用NPM删除package-lock.json文件，如果Yarn删除文件@987654326 @。 之后，重新安装依赖并使用yarn start 或npm run start 命令启动开发服务器。