Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
DonaldLouch opened this issue Oct 26, 2021 · 8 comments
Closed

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

DonaldLouch opened this issue Oct 26, 2021 · 8 comments
Labels
bug Issue was opened via the bug report template.

Comments

@DonaldLouch
Copy link

DonaldLouch commented Oct 26, 2021 •
edited

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"
  }
}
@DonaldLouch DonaldLouch added the bug Issue was opened via the bug report template. label Oct 26, 2021
@DonaldLouch DonaldLouch changed the title {Many Dependencies} requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself. {Many Dependencies} requires a peer of react-dom@>=16.8.6 but none is installed. You must install peer dependencies yourself. Oct 26, 2021
@jonahallibone
Copy link

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

@DonaldLouch
Copy link
Author

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

@DonaldLouch
Copy link
Author

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

@DonaldLouch
Copy link
Author

The issue may be related to: #30330 🤔

@DonaldLouch
Copy link
Author

DonaldLouch commented Oct 27, 2021 •
edited

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
Copy link

rtritto commented Oct 27, 2021 •
edited

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
Copy link
Member

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
Copy link
Member

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.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@timneutkens @jonahallibone @DonaldLouch @balazsorban44 @rtritto