使用创建-反应-应用程序和故事书时出现依赖关系树错误 [英] dependency tree error using create-react-app and storybook

问题描述

TLDR：

如何指导故事书使用Babel-Loader v8.1.0或强制Reaction脚本使用Babel-Loader v^8.2.2？

详细信息

我使用./Example文件夹开发了一个lib，该文件夹本身就是使用Create-Reaction-app创建的项目。我想要在常规示例页面之外添加故事书，所以我安装了故事书。
安装故事书后，我无法再使用yarn start启动示例项目或使用yarn storybook启动故事书。

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.1.0"

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:

  D:Eliavprojectsgit projects
eact-xarrowsexamples
ode_modulesabel-loader (version: 8.2.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would 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.

我知道问题出在哪里，但我不知道如何解决它：

我使用的是react-scriptsv4.0.3，由于未知原因，它恰好需要babel-loaderv8.1.0。我可以用纱线看到这一点。锁定：

react-scripts@^4.0.1:
  version "4.0.3"
  ...
  dependencies:
    ...
    babel-loader "8.1.0"

和需要babel-loaderv8.2.2或更高版本的故事书：

"@storybook/builder-webpack4@6.2.9":
  version "6.2.9"
  ...
  dependencies:
    ...
    babel-loader "^8.2.2"

已尝试

• 上面的错误中写了什么。
• 希望yarn upgrade将Babel-Loader从v8.1.0升级到v8.2.2，但它不起作用，因为反应脚本正好需要v8.1.0

有效的解决方法

在项目目录中创建.env文件，并在该文件中包含SKIP_PREFIX_CHECK=TRUE。

但我想避免它。有可能吗？

推荐答案

对于仍不清楚这一点的人也是如此。

• 我使用create-react-app创建了一个新应用
• 我使用npx sb init
添加了故事书

然后他们发生了冲突。

解决方案：

yarn add babel-loader@8.1.0

更新：

您经常看到的错误是CRA(create-react-app)依赖于特定的依赖关系(例如，对于webpack或babel)。

您还可以根据错误消息指定这些依赖项必须解析到的版本

可以使用package.json中的resolutions字段完成此操作，例如：

    "resolutions": {
        "babel-loader": "8.1.0",
        "webpack": "4.x.x",
    }

之后，一切都将正常工作。

这篇关于使用创建-反应-应用程序和故事书时出现依赖关系树错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！