在react-create-app中使用babel加载程序的问题

问题描述 投票:6回答:7

The Problem

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! [email protected] start: `react-scripts start`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] 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

After what it happened

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

What I've tried

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

还安装纱线和跑yarn && yarn start

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

Info that may be helpful

节点版本: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):

+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]

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"
  ]
}
reactjs webpack babel create-react-app babel-loader
7个回答
10
投票

得到相同的问题,但给了一个小时就可以得到解决方案当我们运行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 [email protected](这取决于你的版本,你可以改变它:npm i [email protected])之后可能是你有webpack问题然后从“Project->node_modules->webpack”关注同样的事情remvoe webpack并重新安装npm i [email protected]

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


7
投票

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


4
投票

在Mac上:

/Users/<yourusername>/node_modules中删除冲突的包


2
投票

然而,在树中检测到更高版本的babel-loader:

您应该删除在树上方检测到的babel-loader软件包。输出说有一个带有babel-loader的node_modules文件夹。

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

您也可以完全删除C:\ Users \ user \ node_modules目录,除非由于某种原因您在/ Users / {user}内部有一个项目。


0
投票

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


0
投票

我遇到了这个问题并且刚刚加入

"babel-loader": "8.0.4",

到依赖关系中的package.json,似乎解决了这个问题


0
投票

这意味着你安装两个babel-loader

rm yarn.lock
run npm uninstall [email protected]

0
投票

我遇到了同样的问题。我通过删除User /和文件package-lock.json(如果存在)中的文件夹node_modules解决了这个问题。它应该完美地工作。


0
投票

我有同样的问题。对于那些通过谷歌找到这个帖子并且像我这样的初学者的人。以下是您输入终端的内容(Mac用户)。

假设你得到了保罗得到的同样错误:

“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 [email protected]

步骤4:现在在您的终端中,导航到您的项目文件夹并键入:npm install或yarn install

步骤5:尝试运行npm start,如果所有问题都已解决,则应启动开发服务器。

注意:对于[email protected]以及Webpack,我必须进行两次上述过程。

© www.soinside.com 2019 - 2024. All rights reserved.