Storybook 将无法安装：无法解决依赖关系：peer react@"^18.2.0"

Question

我想在包含几个前端组件库实现的根目录中初始化 Storybook

project/
// Storybook should be initialized here...
    vue-library/
    twig-library/
    svelte-library/

当我尝试在 project/ 目录中运行任何这些命令时，我会收到错误消息。

npm install @storybook/cli
npx storybook init

错误：

npm WARN
Could not resolve dependency:
peer react@"^18.2.0" from the root project
ERESOLVE overriding peer dependency
While resolving: react-dom@18.2.0
Found: peer react@"^18.2.0" from the root project.

我也尝试从 vue-library/ 文件夹中初始化故事书，但我收到了同样的错误。

我还尝试通过手动将对等依赖项添加到project/ 目录中的package.json 来自行安装react 作为对等依赖项：

{
  "name": "********-********-*********",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "*********************************"
  },
  "dependencies": {
    "@storybook/cli": "^6.5.9"
  },
  "peerDependencies": { 
    "react": "^18.2.0"  <-------------- ADDED THIS
  },
  "author": "**** **",
  "license": "ISC"
}

但这并没有解决问题。

有什么想法吗？

Answer 1

需要在项目根目录下手动安装react和react-dom为"devDependencies"。

npm install -D react react-dom @storybook/cli

您对"peerDependencies" 的概念可能是错误的。一个包的对等 dep 意味着，它是一个包不能没有它的 dep，但是，该包期望其他人负责安装。

这可能听起来很奇怪，但它有助于避免重复安装依赖项。阅读this article了解详情。

---

我只是创建一个空的test/ 文件夹来测试运行。它适用于我的机器^TM。

➜  test npm install -D react react-dom @storybook/cli

# ...

added 1026 packages in 41s

➜  test npx storybook init

Need to install the following packages:
  storybook
Ok to proceed? (y) y

# ...

✨  Done in 44.47s.
. ✓
 • Preparing to install dependencies. ✓


yarn install v1.22.19

[1/4] ?  Resolving packages...
success Already up-to-date.
✨  Done in 1.13s.
. ✓
? checking possible migrations..

✅ migration check successfully ran

To run your Storybook, type:

   yarn storybook 

For more information visit: https://storybook.js.org