{Many Dependencies} `requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.`

What version of Next.js are you using?

12, 12.0.1-canary1,2,3,4,5, 12.0.1

What version of Node.js are you using?

14.18.1

What browser are you using?

Chrome and Safari

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Hello,

I just updated to NextJS 12 and to the latest alpha builds of react and react-dom.

Once I did, I received many errors with npm:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-darwin-arm64@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-darwin-arm64@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-arm64-msvc@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-win32-arm64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-arm64-msvc@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-ia32-msvc@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-win32-ia32-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-ia32-msvc@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-android-arm64@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-android-arm64@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm64-gnu@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-linux-arm64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm64-gnu@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-musl@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-linux-x64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-x64-musl@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-gnu@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-linux-x64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-x64-gnu@12.0.1-canary.1: wanted {"os":"linux","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm-gnueabihf@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-linux-arm-gnueabihf):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm-gnueabihf@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm64-musl@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-linux-arm64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm64-musl@12.0.1-canary.1: wanted {"os":"darwin","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-x64-msvc@12.0.1-canary.1 (node_modules/next/node_modules/@next/swc-win32-x64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-x64-msvc@12.0.1-canary.1: wanted {"os":"win32","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN @babel/plugin-proposal-object-rest-spread@7.12.1 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-jsx@7.14.5 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-syntax-object-rest-spread@7.8.3 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @babel/plugin-transform-parameters@7.15.4 requires a peer of @babel/core@^7.0.0-0 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/accordion@1.3.8 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/alert@1.2.8 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/avatar@1.2.11 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/breadcrumb@1.2.9 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/button@1.4.5 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/checkbox@1.5.8 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/clickable@1.1.8 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/close-button@1.1.12 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/color-mode@1.1.13 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/control-box@1.0.16 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/counter@1.1.10 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/css-reset@1.0.0 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/descendant@2.0.1 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/editable@1.2.10 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/focus-lock@1.1.11 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/form-control@1.4.2 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/hooks@1.6.1 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/icon@1.1.12 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/image@1.0.21 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/input@1.2.11 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/layout@1.4.10 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/live-region@1.0.15 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/media-query@1.1.3 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/menu@1.7.6 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/modal@1.9.2 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/modal@1.9.2 requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/number-input@1.2.11 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/pin-input@1.6.6 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/popover@1.8.5 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/popper@2.3.0 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/portal@1.2.10 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/portal@1.2.10 requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/progress@1.1.15 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/provider@1.6.9 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/provider@1.6.9 requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/radio@1.3.11 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/react@1.6.10 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/react@1.6.10 requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/react-env@1.0.7 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/react-utils@1.1.2 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/select@1.1.16 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/skeleton@1.1.19 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/slider@1.4.1 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/spinner@1.1.13 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/stat@1.1.13 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/switch@1.2.11 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/system@1.7.4 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/table@1.2.7 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/tabs@1.5.6 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/tag@1.1.13 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/textarea@1.1.15 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/toast@1.3.2 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/toast@1.3.2 requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/tooltip@1.3.12 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/tooltip@1.3.12 requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/transition@1.3.6 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @chakra-ui/visually-hidden@1.0.15 requires a peer of react@>=16.8.6 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/babel-plugin@11.3.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/react@11.5.0 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @emotion/styled@11.3.0 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN @fortawesome/react-fontawesome@0.1.16 requires a peer of react@>=16.x but none is installed. You must install peer dependencies yourself.
npm WARN @mdx-js/react@1.6.22 requires a peer of react@^16.13.1 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @reach/alert@0.13.2 requires a peer of react@^16.8.0 || 17.x but none is installed. You must install peer dependencies yourself.
npm WARN @reach/alert@0.13.2 requires a peer of react-dom@^16.8.0 || 17.x but none is installed. You must install peer dependencies yourself.
npm WARN @reach/utils@0.13.2 requires a peer of react@^16.8.0 || 17.x but none is installed. You must install peer dependencies yourself.
npm WARN @reach/utils@0.13.2 requires a peer of react-dom@^16.8.0 || 17.x but none is installed. You must install peer dependencies yourself.
npm WARN @reach/visually-hidden@0.13.2 requires a peer of react@^16.8.0 || 17.x but none is installed. You must install peer dependencies yourself.
npm WARN @reach/visually-hidden@0.13.2 requires a peer of react-dom@^16.8.0 || 17.x but none is installed. You must install peer dependencies yourself.
npm WARN @typescript-eslint/parser@4.33.0 requires a peer of eslint@^5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN babel-plugin-apply-mdx-type-prop@1.6.22 requires a peer of @babel/core@^7.11.6 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-next@12.0.0 requires a peer of eslint@^7.23.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-config-next@12.0.0 requires a peer of next@>=10.2.0 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-jsx-a11y@6.4.1 requires a peer of eslint@^3 || ^4 || ^5 || ^6 || ^7 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react@7.26.1 requires a peer of eslint@^3 || ^4 || ^5 || ^6 || ^7 but none is installed. You must install peer dependencies yourself.
npm WARN eslint-plugin-react-hooks@4.2.0 requires a peer of eslint@^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN formik@2.2.9 requires a peer of react@>=16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN formik-chakra-ui@1.4.8 requires a peer of react@>=17 but none is installed. You must install peer dependencies yourself.
npm WARN framer-motion@4.1.17 requires a peer of react@>=16.8 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN framer-motion@4.1.17 requires a peer of react-dom@>=16.8 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-clientside-effect@1.2.5 requires a peer of react@^15.3.0 || ^16.0.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-firebase-hooks@3.0.4 requires a peer of react@>= 16.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-firebaseui@5.0.2 requires a peer of react@>=15 <=17 but none is installed. You must install peer dependencies yourself.
npm WARN react-firebaseui@5.0.2 requires a peer of firebase@^8.2.4 but none is installed. You must install peer dependencies yourself.
npm WARN react-focus-lock@2.5.0 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-remove-scroll@2.4.1 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-remove-scroll-bar@2.2.0 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-style-singleton@2.1.1 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN use-callback-ref@1.2.5 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN use-sidecar@1.0.5 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN next@12.0.1-canary.1 requires a peer of react@^17.0.2 || ^18.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN next@12.0.1-canary.1 requires a peer of react-dom@^17.0.2 || ^18.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @next/react-dev-overlay@12.0.1-canary.1 requires a peer of react@^17.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN @next/react-dev-overlay@12.0.1-canary.1 requires a peer of react-dom@^17.0.2 but none is installed. You must install peer dependencies yourself.
npm WARN styled-jsx@5.0.0-beta.3 requires a peer of react@>= 16.8.0 || 17.x.x || 18.x.x but none is installed. You must install peer dependencies yourself.
npm WARN use-subscription@1.5.1 requires a peer of react@^16.8.0 || ^17.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN react-server-dom-webpack@0.0.0-experimental-3c4c1c470-20211021 requires a peer of react@0.0.0-experimental-3c4c1c470-20211021 but none is installed. You must install peer dependencies yourself.
npm WARN react-server-dom-webpack@0.0.0-experimental-3c4c1c470-20211021 requires a peer of react-dom@0.0.0-experimental-3c4c1c470-20211021 but none is installed. You must install peer dependencies yourself.
npm WARN react-server-dom-webpack@0.0.0-experimental-3c4c1c470-20211021 requires a peer of webpack@^4.43.0 but none is installed. You must install peer dependencies yourself.
npm WARN stylis-rule-sheet@0.0.10 requires a peer of stylis@^3.5.0 but none is installed. You must install peer dependencies yourself.

Any help will be greatly appreciated 😊

Cheers, Donald Louch CEO and Founder of DevLexicon

Expected Behavior

The NPM dependencies should install with no warnings or errors.

To Reproduce

• npm update
• npm I
• npm install {DEPENDENCIE}
• Delete the node_modules folder and re-running npm I
• Delete the package-lock.json folder and re-running npm I

EDIT: Adding my package.json file

{
  "name": "devlexicon",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "prettier-fix": "prettier --write ."
  },
  "dependencies": {
    "@chakra-ui/react": "latest",
    "@emotion/react": "latest",
    "@emotion/styled": "latest",
    "@fontsource/lato": "latest",
    "@fontsource/playfair-display": "latest",
    "@fortawesome/fontawesome-svg-core": "latest",
    "@fortawesome/free-brands-svg-icons": "latest",
    "@fortawesome/free-regular-svg-icons": "latest",
    "@fortawesome/free-solid-svg-icons": "latest",
    "@fortawesome/react-fontawesome": "latest",
    "@mdx-js/loader": "^1.6.22",
    "@next/mdx": "latest",
    "firebase": "latest",
    "firebase-admin": "latest",
    "formik": "latest",
    "framer-motion": "latest",
    "next": "^12.0.1-canary.1",
    "nookies": "latest",
    "npm-install-peers": "latest",
    "react-firebase-hooks": "latest",
    "react-firebaseui": "latest",
    "uuid": "latest",
    "uuidv4": "latest",
    "yup": "latest"
  },
  "devDependencies": {
    "@types/body-scroll-lock": "latest",
    "@types/cookie": "latest",
    "@types/js-cookie": "latest",
    "@types/lodash.debounce": "latest",
    "@types/lodash.random": "latest",
    "@types/lodash.throttle": "latest",
    "@types/node": "latest",
    "@types/react": "latest",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "formik-chakra-ui": "^1.4.8",
    "prettier": "latest",
    "react": "^18.0.0-alpha-4298ddbc5-20211023",
    "react-dom": "^18.0.0-alpha-4298ddbc5-20211023",
    "typescript": "latest"
  }
}

[timneutkens]

The react-server-dom-webpack warnings have been fixed on https://github.com/vercel/next.js/pull/30505. They’re just warnings though. Can be ignored currently. This is currently being published to canary.

SKIPPING OPTIONAL DEPENDENCY can be safely ignored, it means you’re on an old version of npm or yarn where it still showed those warnings even though it just ignored those libraries as they’re not for your OS.

You don’t need legacy-peerdeps to use Next.js.

Going to close this issue as everything mentioned has been fixed and most of the warnings are coming from an outdated version of npm being used on your machine.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.