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

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

Open
christianareas opened this issue May 12, 2023 · 4 comments
Open

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

christianareas opened this issue May 12, 2023 · 4 comments
Assignees
@brendarearden
Labels
p/medium t/bug Something isn't working triaged

Comments

@christianareas
Copy link

christianareas commented May 12, 2023 •
edited

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/radio@3.1.2
npm WARN Found: react@18.2.0
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/radio@3.1.2
npm WARN node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/radio
npm WARN   @react-types/radio@"3.1.2" from @stoplight/mosaic-code-editor@1.40.0
npm WARN   node_modules/@stoplight/mosaic-code-editor
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/radio@3.1.2
npm WARN   node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/radio
npm WARN     @react-types/radio@"3.1.2" from @stoplight/mosaic-code-editor@1.40.0
npm WARN     node_modules/@stoplight/mosaic-code-editor
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/shared@3.9.0
npm WARN Found: react@18.2.0
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/shared@3.9.0
npm WARN node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/shared
npm WARN   @react-types/shared@"3.9.0" from @stoplight/mosaic-code-editor@1.40.0
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: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/shared@3.9.0
npm WARN   node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/shared
npm WARN     @react-types/shared@"3.9.0" from @stoplight/mosaic-code-editor@1.40.0
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/switch@3.1.2
npm WARN Found: react@18.2.0
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/switch@3.1.2
npm WARN node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/switch
npm WARN   @react-types/switch@"3.1.2" from @stoplight/mosaic-code-editor@1.40.0
npm WARN   node_modules/@stoplight/mosaic-code-editor
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/switch@3.1.2
npm WARN   node_modules/@stoplight/mosaic-code-editor/node_modules/@react-types/switch
npm WARN     @react-types/switch@"3.1.2" from @stoplight/mosaic-code-editor@1.40.0
npm WARN     node_modules/@stoplight/mosaic-code-editor
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/radio@3.1.2
npm WARN Found: react@18.2.0
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/radio@3.1.2
npm WARN node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/radio
npm WARN   @react-types/radio@"3.1.2" from @stoplight/mosaic-code-viewer@1.40.0
npm WARN   node_modules/@stoplight/mosaic-code-viewer
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/radio@3.1.2
npm WARN   node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/radio
npm WARN     @react-types/radio@"3.1.2" from @stoplight/mosaic-code-viewer@1.40.0
npm WARN     node_modules/@stoplight/mosaic-code-viewer
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/shared@3.9.0
npm WARN Found: react@18.2.0
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/shared@3.9.0
npm WARN node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/shared
npm WARN   @react-types/shared@"3.9.0" from @stoplight/mosaic-code-viewer@1.40.0
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: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/shared@3.9.0
npm WARN   node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/shared
npm WARN     @react-types/shared@"3.9.0" from @stoplight/mosaic-code-viewer@1.40.0
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/switch@3.1.2
npm WARN Found: react@18.2.0
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/switch@3.1.2
npm WARN node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/switch
npm WARN   @react-types/switch@"3.1.2" from @stoplight/mosaic-code-viewer@1.40.0
npm WARN   node_modules/@stoplight/mosaic-code-viewer
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/switch@3.1.2
npm WARN   node_modules/@stoplight/mosaic-code-viewer/node_modules/@react-types/switch
npm WARN     @react-types/switch@"3.1.2" from @stoplight/mosaic-code-viewer@1.40.0
npm WARN     node_modules/@stoplight/mosaic-code-viewer
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/button@3.4.1
npm WARN Found: react@18.2.0
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/button@3.4.1
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/button
npm WARN   @react-types/button@"3.4.1" from @stoplight/mosaic@1.40.0
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/button@3.4.1
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/button
npm WARN     @react-types/button@"3.4.1" from @stoplight/mosaic@1.40.0
npm WARN     node_modules/@stoplight/mosaic
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/radio@3.1.2
npm WARN Found: react@18.2.0
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/radio@3.1.2
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/radio
npm WARN   @react-types/radio@"3.1.2" from @stoplight/mosaic@1.40.0
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/radio@3.1.2
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/radio
npm WARN     @react-types/radio@"3.1.2" from @stoplight/mosaic@1.40.0
npm WARN     node_modules/@stoplight/mosaic
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/shared@3.9.0
npm WARN Found: react@18.2.0
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/shared@3.9.0
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/shared
npm WARN   @react-types/shared@"3.9.0" from @stoplight/mosaic@1.40.0
npm WARN   node_modules/@stoplight/mosaic
npm WARN   4 more (@react-types/button, @react-types/radio, ...)
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/shared@3.9.0
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/shared
npm WARN     @react-types/shared@"3.9.0" from @stoplight/mosaic@1.40.0
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/switch@3.1.2
npm WARN Found: react@18.2.0
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/switch@3.1.2
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/switch
npm WARN   @react-types/switch@"3.1.2" from @stoplight/mosaic@1.40.0
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/switch@3.1.2
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/switch
npm WARN     @react-types/switch@"3.1.2" from @stoplight/mosaic@1.40.0
npm WARN     node_modules/@stoplight/mosaic
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @react-types/textfield@3.3.0
npm WARN Found: react@18.2.0
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/textfield@3.3.0
npm WARN node_modules/@stoplight/mosaic/node_modules/@react-types/textfield
npm WARN   @react-types/textfield@"3.3.0" from @stoplight/mosaic@1.40.0
npm WARN   node_modules/@stoplight/mosaic
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.0 || ^17.0.0-rc.1" from @react-types/textfield@3.3.0
npm WARN   node_modules/@stoplight/mosaic/node_modules/@react-types/textfield
npm WARN     @react-types/textfield@"3.3.0" from @stoplight/mosaic@1.40.0
npm WARN     node_modules/@stoplight/mosaic
@christianareas
Copy link
Author

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

@chohmann chohmann added t/bug Something isn't working p/high triaged labels Oct 27, 2023
@brendarearden brendarearden self-assigned this Oct 30, 2023
@brendarearden brendarearden mentioned this issue Nov 8, 2023
Closed
2 tasks
@brendarearden
Copy link
Contributor

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.

@graham-atom
Copy link

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

@chohmann chohmann added p/medium and removed p/high labels Dec 4, 2023
@itorras13
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brendarearden brendarearden

Labels
p/medium t/bug Something isn't working triaged
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@itorras13 @christianareas @brendarearden @chohmann @graham-atom