使用 create-react-app 和 storybook 的依赖树错误
TLDR:
我如何指示 storybook 使用 babel-loader v8.1.0 或强制 react-scripts 使用 babel-loader v^8.2.2?
详细信息
我使用 ./example 文件夹开发了一个库,它本身就是使用 create-react-app 创建的项目。我想在普通的示例页面之外添加 storybook,所以我安装了 storybook。
安装 storybook 后,我无法再使用
yarn start
启动示例项目或使用
yarn storybook
启动 story book。
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"
并且 storybook 需要
babel-loader
v8.2.2 或更高版本:
"@storybook/[email protected]":
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。
但我想避免它。可能吗?
因此对于那些仍不清楚这一点的人来说。
- I used
create-react-app
to create a new app- I added storybook using
npx sb init
然后他们发生了冲突。
解决方案:
yarn add
[email protected]
更新:
The error you often see is that CRA (
create-react-app
) relies on specific dependencies (e.g. forwebpack
orbabel
).What can also be done is you specify which versions those dependencies must resolve to, based on the error messages
这可以使用
package.json
中的
resolutions
字段来完成,例如:
"resolutions": {
"babel-loader": "8.1.0",
"webpack": "4.x.x",
}
After this all will work Fine.
2 个需要考虑的链接 https://github.com/facebook/create-react-app/issues/10123 和 https://github.com/storybookjs/storybook/issues/4764#issuecomment-740785850
似乎大多数人都在安装该软件包以使其工作,即使它说不要手动安装。
所以尝试:
yarn add [电子邮件保护]