Conflicting peer dependency [email protected] when installing Storybook 6.5.13

Here's my package.json

"dependencies": {
        "@emotion/react": "^11.10.4",
        "@emotion/styled": "^11.10.4",
        "@fontsource/roboto": "^4.5.8",
        "@mui/icons-material": "^5.10.9",
        "@mui/material": "^5.10.10",
        "@reduxjs/toolkit": "^1.8.6",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^14.4.3",
        "@types/jest": "^29.2.0",
        "@types/node": "^18.11.4",
        "@types/react": "^18.0.21",
        "@types/react-dom": "^18.0.6",
        "async-mutex": "^0.4.0",
        "boring-avatars": "^1.7.0",
        "crypto-js": "^4.1.1",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
    "react-hook-form": "^7.38.0",
        "react-redux": "^8.0.4",
        "react-router-dom": "^6.4.2",
        "react-scripts": "5.0.1",
        "redux-persist": "^6.0.0",
        "typescript": "^4.8.4",
        "web-vitals": "^3.0.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "eslint": "eslint \"src/**/*.{tsx,jsx,ts,js}\"",
        "eslint:fix": "npm run eslint -- --fix",
        "eslint:teamcity": "npm run eslint -- --format teamcity",
        "storybook": "start-storybook -p 6006 -s public",
        "build-storybook": "build-storybook -s public"
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@storybook/addon-actions": "^6.5.13",
        "@storybook/addon-essentials": "^6.5.13",
        "@storybook/addon-interactions": "^6.5.13",
        "@storybook/addon-links": "^6.5.13",
        "@storybook/builder-webpack5": "^6.5.13",
        "@storybook/manager-webpack5": "^6.5.13",
        "@storybook/node-logger": "^6.5.13",
        "@storybook/preset-create-react-app": "^4.1.2",
        "@storybook/react": "^6.5.13",
        "@storybook/testing-library": "^0.0.13",
        "@types/crypto-js": "^4.1.1",
        "@typescript-eslint/eslint-plugin": "^5.40.1",
        "@typescript-eslint/parser": "^5.40.1",
        "babel-plugin-named-exports-order": "^0.0.2",
        "eslint": "^8.26.0",
        "eslint-config-airbnb": "^19.0.4",
        "eslint-config-airbnb-typescript": "^17.0.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-formatter-teamcity": "^1.0.0",
        "eslint-plugin-prettier": "^4.2.1",
        "jest-teamcity": "^1.11.0",
        "prettier": "^2.7.1",
        "prop-types": "^15.8.1",
        "webpack": "^5.74.0"
    },
    "jest": {
        "coverageReporters": [
            "json-summary",
            "lcov",
            "text",
            "teamcity"
        ],
        "collectCoverageFrom": [
            "src/**/*.{ts,tsx,js,jsx}",
            "!src/index.{jsx,tsx}",
            "!src/**/interfaces/**",
            "!src/serviceWorker.ts",
            "!src/react-app-env.d.ts",
            "!src/mocks/browserWorker.ts",
            "!src/mocks/**"
        ]
    }

When I run npm install, this is what I get:

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   53 more (@design-systems/utils, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4 || ^17.0.0" from [email protected]
npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN   react-inspector@"^5.1.0" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-actions
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.4 || ^17.0.0" from [email protected]
npm WARN   node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN     react-inspector@"^5.1.0" from @storybook/[email protected]
npm WARN     node_modules/@storybook/addon-actions
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @mdx-js/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   53 more (@design-systems/utils, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected]
npm WARN node_modules/@storybook/addon-docs/node_modules/@mdx-js/react
npm WARN   @mdx-js/react@"^1.6.22" from @storybook/[email protected]
npm WARN   node_modules/@storybook/addon-docs
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.13.1 || ^17.0.0" from @mdx-js/[email protected]
npm WARN   node_modules/@storybook/addon-docs/node_modules/@mdx-js/react
npm WARN     @mdx-js/react@"^1.6.22" from @storybook/[email protected]
npm WARN     node_modules/@storybook/addon-docs
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   53 more (@design-systems/utils, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN   node_modules/@storybook/react
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN   node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN     node_modules/@storybook/react
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: [email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react-dom
npm WARN   react-dom@"^18.2.0" from the root project
npm WARN   36 more (@design-systems/utils, @mui/base, @mui/material, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN   react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN   node_modules/@storybook/react
npm WARN 
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react-dom
npm WARN   peer react-dom@"^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1" from [email protected]
npm WARN   node_modules/@storybook/react/node_modules/react-element-to-jsx-string
npm WARN     react-element-to-jsx-string@"^14.3.4" from @storybook/[email protected]
npm WARN     node_modules/@storybook/react
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: some dependency vulnerabilities fixed, support for node < 10 dropped, and newer ECMAScript syntax/features added
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.

At this stage it's not really a blocker, I can still run my app and storybook, but we also can't just ignore it. I found it strange that Storybook website says it's compatible with [email protected] and yet it shows peer dependency with [email protected].

I've tried the following:

Downgraded npm from 8.x to 7.x and the peer dependency conflict is gone, just some warnings for deprecated packages, but this is not ideal as it means we'll have to keep using an old version of npm.
Downgraded react to 17.0.2 but got even worse dependency errors, and moving forward we need to make sure we always have the latest features and fixes so this is also not ideal.
Upgraded storybook to 7.0.0-alpha using npx sb@next upgrade --prerelease and initially it seems ok because I didn't have the peer dependency conflicts during the install, just some deprecated warnings, but as soon as I run storybook I ran into a whole bunch of of errors and storybook wouldn't start. So, not working either.

And I need to point out that I'm not keen to use --force or --legacy-peer-deps. We use TeamCity for CI/CD so ideally we don't have to do any manual install as workaround every time we run the job.

Thanks :)

Recommended topics

Hot tags