使用 create-react-app 和 storybook 的依赖树错误

IT技术 reactjs dependency-management babel-loader
2021-05-14 23:19:36

域名注册地址:

我如何指示 storybook 使用 babel-loader v8.1.0 或强制 react-scripts 使用 babel-loader v^8.2.2 ?

细节

我使用 ./example 文件夹开发了一个库,该文件夹本身是使用 create-react-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:\Eliav\projects\git projects\react-xarrows\examples\node_modules\babel-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。我可以在 yarn.lock 中看到它:

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 但它不起作用,因为 react-scripts 完全需要 v8.1.0

一个有效的解决方法

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

但我想避免它。是否可以?

2个回答

2 链接考虑https://github.com/facebook/create-react-app/issues/10123https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850

似乎大多数人都在安装该软件包以使其正常工作,即使它说不要手动安装。

所以尝试:

纱线添加 babel-loader@8.1.0

所以对于任何人来说这仍然不清楚。

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

然后他们发生了冲突。

解决方案:

yarn add babel-loader@8.1.0

更新:

您经常看到的错误是 CRA ( create-react-app) 依赖于特定的依赖项(例如 forwebpackbabel)。

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

这可以使用中的resolutions字段来完成package.json,例如:

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

在这一切之后,一切都会好起来的。