react-create-app 中 babel loader 的问题

Question

问题

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\_logs18-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"
  ]
}

Answer 1

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

Answer 2

在 Mac:

从 /Users/<yourusername>/node_modules

中删除冲突包

Answer 3

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

Answer 4

遇到同样的问题，但花一个小时得到解决方案当我们运行 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 问题然后按照相同的方法从 remvoe webpack “Project->node_modules->webpack” 并重新安装 npm i webpack@4.19.1

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

Answer 5

However, a different version of babel-loader was detected higher up in the tree:

您应该删除在树的更高层检测到的 babel-loader 包。输出显示有一个 node_modules 文件夹，其中包含 babel-loader at..

C:\Users\user\node_modules\babel-loader (version: 8.0.2)

您也可以完全删除 C:\Users\user\node_modules 目录，除非出于某种原因您有一个根目录位于 /Users/{user}

Answer 6

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

"babel-loader": "8.0.4",

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

Answer 7

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

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

Answer 8

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

Answer 9

我遇到了完全相同的问题。对于通过 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安装

第五步：尝试运行npm start，如果所有问题都解决了，就应该开始开发了服务器。

注意： 我必须执行上述过程两次，对于 babel-loader@8.0.6 以及对于 Webpack.

Answer 10

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

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

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

[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.......][...]

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

"/Users/john/node_modules/babel-loader (version: "7.1.5") -> was a version that creates conflict with above specified - version "babel-loader@8.0.6"

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

Answer 11

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

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

如果你使用后端（nodejs）检查你的后端是否使用了webpack 确保你的 create-react-app webpack 和后端 webpack 版本相同

Answer 12

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

为我工作

Answer 13

我在 babel-loader@8.1.0 中遇到了同样的错误，我删除了 package.json 中的引用以及 node_modules 中的模块，并安装了“npm i babel-loader@8.1. 0" 但随后引入了@jest 错误。

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

Answer 14

几年后，同样的问题。

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

Answer 15

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

删除了节点模块，yarn.loack，包-lock.json
纱线开始
它工作得很好

react-create-app 中 babel loader 的问题

Problems with babel loader in react-create-app

reactjs

webpack

babeljs

create-react-app

babel-loader

问题

事情发生后

我试过的

可能有用的信息