reactjs - 使用 create-react-app 和 storybook 的依赖树错误
问题描述
TLDR:
如何指示故事书使用 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-scripts
v4.0.3,由于未知原因,它需要完全babel-loader
v8.1.0。我可以在 yarn.lock 中看到它:
react-scripts@^4.0.1:
version "4.0.3"
...
dependencies:
...
babel-loader "8.1.0"
和需要babel-loader
v8.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。
但我想避免它。可能吗?
解决方案
因此,对于任何对此仍不清楚的人来说。
- 我曾经
create-react-app
创建一个新应用程序- 我添加了故事书使用
npx sb init
然后他们发生了冲突。
解决方案:
yarn add babel-loader@8.1.0
更新:
您经常看到的错误是 CRA (
create-react-app
) 依赖于特定的依赖项(例如 forwebpack
或babel
)。您还可以根据错误消息指定这些依赖项必须解析到的版本
这可以使用 中的resolutions
字段来完成package.json
,例如:
"resolutions": {
"babel-loader": "8.1.0",
"webpack": "4.x.x",
}
在这一切都会正常工作。
推荐阅读
- swift - 如何在 PDFView 中移动 PDFPage 上的 PDFAnnotation?
- jquery - 使用 vue.js 在图像上传时保存图像类型
- excel - 根据另一列中的值为一列的空白单元格着色
- r - R 的 caTools Sample.Split 结果不正确
- kotlin - 在哪里存储我的文本变量(书的文本价值)以及如何访问它们
- android - 检查是否通过 Play 商店生产或测试轨道安装了 Android 应用
- swift - 根据内容计数快速返回数组
- javascript - 使用 react-monaco-editor 正确消除调用 onChange 以进行更新
- java - 来自拦截器令牌的召回 http 请求无效
- firebase - 如何从 Firebase 托管中删除文件