react-create-app

时间:2018-12-13 19:00:08

标签: reactjs webpack babel create-react-app babel-loader

问题

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 start

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

可能有用的信息

节点版本: 10.8.0
NPM版本: 6.5.0
create-react-app / react-scripts: 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"
  ]
}

14 个答案:

答案 0 :(得分:7)

遇到相同的问题,但要花一个小时才能解决 当我们运行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问题,然后按照同样的方法从“ {{1 }}” 并重新安装Project->node_modules->webpack

4.19.1 * Webpack的版本可能有所更改。.

答案 1 :(得分:3)

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

答案 2 :(得分:2)

  

但是,在树的上方检测到了另一个版本的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}中有一个植根于此的项目

答案 3 :(得分:1)

在Mac上:

/Users/<yourusername>/node_modules删除有冲突的软件包

答案 4 :(得分:0)

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

答案 5 :(得分:0)

我遇到了这个问题,只是添加了

"babel-loader": "8.0.4",

到我的package.json中的依赖项,它似乎可以解决问题

答案 6 :(得分:0)

这意味着您安装了拖车babel-loader

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

答案 7 :(得分:0)

我遇到了同样的问题。 我通过删除User /中的文件夹node_modules和文件package-lock.json(如果存在)解决了该问题。 然后它应该可以正常工作。

答案 8 :(得分:0)

我遇到了同样的问题。对于任何通过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 做两次上述过程。 / p>

答案 9 :(得分:0)

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

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(版本:” 7.1.5“)->是   与上面指定的版本产生冲突的版本-版本   “ babel-loader@8.0.6”

对我来说,解决方案是:在我的文件夹中遵循此路径,并删除node_modules文件夹,然后再次重新启动项目。

答案 10 :(得分:0)

git init --bare

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

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

答案 11 :(得分:0)

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

为我工作

答案 12 :(得分:0)

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

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

答案 13 :(得分:0)

几年后,同样的问题。

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