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

[DonaldLouch]

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

[jonahallibone]

Have you tried npm i --legacy-peer-deps?

[DonaldLouch]

Thanks for your reply @jonahallibone, I just tried and unfortunately, that didn't work and still caused all the same vulnerabilities.

[DonaldLouch]

I have further tried npm audit fix and all vulnerabilities are still present.

[DonaldLouch]

The issue may be related to: #30330 🤔

[DonaldLouch]

After updating all the dependencies to their latest version and have the version number in package.json, plus adding the recommend work-around flag found in the linked issue, above. I was able to at least get the errors down, plus was able to at least run npm run dev without it crashing on build 🙌🏻 however, like mentioned in that issue, I have also ran into an issue with Firebase and Chakra UI

I did find that running react and react-dom at alpha or next, was causing a number of the vulnerabilities; in addition the dependency of mdx was causing a HIGH level of vulnerabilities 🤔

New Errors

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.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-darwin-arm64@12.0.1 (node_modules/@next/swc-darwin-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-darwin-arm64@12.0.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 (node_modules/@next/swc-linux-arm64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm64-gnu@12.0.1: wanted {"os":"linux","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm-gnueabihf@12.0.1 (node_modules/@next/swc-linux-arm-gnueabihf):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm-gnueabihf@12.0.1: wanted {"os":"linux","arch":"arm"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-android-arm64@12.0.1 (node_modules/@next/swc-android-arm64):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-android-arm64@12.0.1: wanted {"os":"android","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-gnu@12.0.1 (node_modules/@next/swc-linux-x64-gnu):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-x64-gnu@12.0.1: wanted {"os":"linux","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-arm64-musl@12.0.1 (node_modules/@next/swc-linux-arm64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-arm64-musl@12.0.1: wanted {"os":"linux","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-linux-x64-musl@12.0.1 (node_modules/@next/swc-linux-x64-musl):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-linux-x64-musl@12.0.1: wanted {"os":"linux","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-x64-msvc@12.0.1 (node_modules/@next/swc-win32-x64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-x64-msvc@12.0.1: wanted {"os":"win32","arch":"x64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-arm64-msvc@12.0.1 (node_modules/@next/swc-win32-arm64-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-arm64-msvc@12.0.1: wanted {"os":"win32","arch":"arm64"} (current: {"os":"darwin","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: @next/swc-win32-ia32-msvc@12.0.1 (node_modules/@next/swc-win32-ia32-msvc):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for @next/swc-win32-ia32-msvc@12.0.1: wanted {"os":"win32","arch":"ia32"} (current: {"os":"darwin","arch":"x64"})

The Updated package.json

{
  "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": {
    "@babel/core": "^7.15.8",
    "@chakra-ui/react": "^1.6.10",
    "@emotion/react": "^11.5.0",
    "@emotion/styled": "^11.3.0",
    "@fontsource/lato": "^4.5.0",
    "@fontsource/playfair-display": "^4.5.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-regular-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.16",
    "firebase": "^9.1.3",
    "firebase-admin": "^10.0.0",
    "formik": "^2.2.9",
    "formik-chakra-ui": "^1.4.8",
    "framer-motion": "^4.1.17",
    "next": "^v12.0.1",
    "nookies": "^2.5.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "stylis": "^4.0.10",
    "uuid": "^8.3.2",
    "uuidv4": "^6.2.12",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@swc/cli": "^0.1.51",
    "@swc/core": "^1.2.103",
    "@types/body-scroll-lock": "^3.1.0",
    "@types/cookie": "^0.4.1",
    "@types/js-cookie": "^3.0.0",
    "@types/lodash.debounce": "^4.0.6",
    "@types/lodash.random": "^3.2.6",
    "@types/lodash.throttle": "^4.1.6",
    "@types/node": "^16.11.6",
    "@types/react": "^17.0.33",
    "eslint": "^7.32.0",
    "eslint-config-next": "^12.0.1",
    "prettier": "^2.4.1",
    "typescript": "^4.4.4"
  }
}

Recommendation from @timneutkens

# next.config.js
module.exports = {
  experimental: {
    esmExternals: false
  }
}

[rtritto]

Related to first 3 warnings for react-server-dom-webpack:

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.

react-server-dom-webpack have these peerDependencies:

• react: 0.0.0-experimental-3c4c1c470-20211021
• react-dom: 0.0.0-experimental-3c4c1c470-20211021
• webpack: ^4.43.0

react and react-dom values are different from values of peerDependencies in package.json of next.js. --> peerDependencies of react-server-dom-webpack should be fixed and replaced probably with ^17.0.2 || ^18.0.0.

webpack peerDependency isn't in peerDependencies in package.json of next.js. --> It should be added in peerDependency of next.js (I opened this issue #30481)

[timneutkens]

The react-server-dom-webpack warnings have been fixed on #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.