Storybook will not install: Could not resolve dependency: peer react@"^18.2.0"

I want to initialize Storybook in a root directory which contains several front-end component library implementations

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

When I try to run any of these commands in the project/ directory I get an error.

npm install @storybook/cli
npx storybook init

The error:

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.

I tried initializing storybook from inside the vue-library/ folder as well, and I received the same error.

I also tried to install react as a peer dependency on my own by manually adding the peer dependency to a package.json in the project/ directory:

{
  "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"
}

This didn't solve the problem, though.

Any ideas?

Solution

You need to manually install react and react-dom as "devDependencies" in the project root directory.

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

Your concept of "peerDependencies" is likely wrong. A package’s peer dep means, it’s a dep which the package cannot live without, nonetheless, the package is expecting someone else to take care of the installation.

This might sound weird but it helps avoid duplicate dependency installation. Read this article for detail.

I just create an empty test/ folder to test run. It works on my machine^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