elements icon indicating copy to clipboard operation
elements copied to clipboard

Published 20 hours ago • verified publisher icon stoplightio

elements conflicts with React 18 (and Next.js 13.4)

Open christianareas opened this issue 2 years ago • 4 comments
trafficstars

See below. I can get elements to work in the project, but am seeing errors in the console that I believe are related to these issues. Please let me know if there's anything I can do to help!

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/radio
npm WARN   @react-types/radio@"3.1.2" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-editor
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/radio
npm WARN     @react-types/radio@"3.1.2" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic-code-editor
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/shared
npm WARN   @react-types/shared@"3.9.0" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-editor
npm WARN   2 more (@react-types/radio, @react-types/switch)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/shared
npm WARN     @react-types/shared@"3.9.0" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic-code-editor
npm WARN     2 more (@react-types/radio, @react-types/switch)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/switch
npm WARN   @react-types/switch@"3.1.2" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-editor
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/switch
npm WARN     @react-types/switch@"3.1.2" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic-code-editor
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/radio
npm WARN   @react-types/radio@"3.1.2" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-viewer
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/radio
npm WARN     @react-types/radio@"3.1.2" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic-code-viewer
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/shared
npm WARN   @react-types/shared@"3.9.0" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-viewer
npm WARN   2 more (@react-types/radio, @react-types/switch)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/shared
npm WARN     @react-types/shared@"3.9.0" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic-code-viewer
npm WARN     2 more (@react-types/radio, @react-types/switch)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/switch
npm WARN   @react-types/switch@"3.1.2" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-viewer
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/switch
npm WARN     @react-types/switch@"3.1.2" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic-code-viewer
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/button
npm WARN   @react-types/button@"3.4.1" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/button
npm WARN     @react-types/button@"3.4.1" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/radio
npm WARN   @react-types/radio@"3.1.2" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/radio
npm WARN     @react-types/radio@"3.1.2" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/shared
npm WARN   @react-types/shared@"3.9.0" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic
npm WARN   4 more (@react-types/button, @react-types/radio, ...)
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/shared
npm WARN     @react-types/shared@"3.9.0" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic
npm WARN     4 more (@react-types/button, @react-types/radio, ...)
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/switch
npm WARN   @react-types/switch@"3.1.2" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/switch
npm WARN     @react-types/switch@"3.1.2" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/react
npm WARN   react@"^18.2.0" from the root project
npm WARN   37 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/textfield
npm WARN   @react-types/textfield@"3.3.0" from @stoplight/[email protected]
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/[email protected]
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/textfield
npm WARN     @react-types/textfield@"3.3.0" from @stoplight/[email protected]
npm WARN     node_modules/@stoplight/mosaic

christianareas avatar May 12 '23 06:05 christianareas

Here's my package.json for reference.

{
  "name": "resume-api",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "bundle-api": "swagger-cli bundle docs/spec/resume-api.yaml -o docs/spec/_versions/resume-api-${npm_package_version}.yaml -t yaml"
  },
  "dependencies": {
    "@stoplight/elements": "^7.7.16",
    "@types/node": "18.16.3",
    "@types/react": "18.2.0",
    "@types/react-dom": "18.2.1",
    "autoprefixer": "10.4.14",
    "eslint": "8.39.0",
    "eslint-config-next": "^13.4.1",
    "next": "^13.4.1",
    "postcss": "8.4.23",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "swagger-cli": "^4.0.4"
  }
}

christianareas avatar May 12 '23 06:05 christianareas

Status Update

When attempting to upgrade to React 18, we discovered a one of our dependencies is not React 18 compatible, meaning some of their props do not implement React.PropsWithChildren or have a children: ReactNode on them. This is a blocker for moving forward with this upgrade as we cannot move past the type errors without the dependency upgrading. We have opened an issue are tracking the fix for https://www.npmjs.com/package/@stoplight/mosaic. Once that is updated, we can resume work on this issue.

  • The draft PR has been linked to this issue
  • Additional PRs have been opened to update types to be React 18 compatible, those are also linked to this issue.

brendarearden avatar Nov 08 '23 23:11 brendarearden

@brendarearden can you provide the link to the other issue that you are tracking that is needed to fix this one? thanks

graham-atom avatar Nov 17 '23 22:11 graham-atom

@brendarearden @chohmann any updates on this? Looks like the linked pull request was closed.

itorras13 avatar Apr 23 '24 21:04 itorras13