React 18 peer dependency errors from radix dependencies

[irl-dan]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Other

Please describe your feature-request in detail.

We're trying to use @aws-amplify/ui-react with the React 18 and we're seeing this is not supported:

On npm install, with "react": "^18.0.0", and "@aws-amplify/ui-react": "^2.19.1", in our package.json dependencies, we get the following error:

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0" from the root project
npm ERR!   peer react@">= 16.8.0" from @aws-amplify/[email protected]
npm ERR!   node_modules/@aws-amplify/ui-react
npm ERR!     @aws-amplify/ui-react@"^2.19.1" from the root project

React 18 is the latest supported release of React and we'd love to see support for it from Amplify!

Please describe a solution you'd like.

This is a matter of upgrading the peerDependencies here: https://github.com/aws-amplify/amplify-ui/blob/28bf92ddbd893a3c2839d5215537f845db46b181/packages/react/package.json#L81

We love contributors! Is this something you'd be interested in working on?

• [ ] 👋 I may be able to implement this feature request.
• [ ] ⚠️ This feature might incur a breaking change.

[reesscot]

Hi @irl-dan, Despite the error message you are seeing, our library does indeed support React 18. The reason that you are seeing this error is because we depend on upstream packages which haven't yet been updated to include 18 in their react peer dependency declaration. We haven't seen any issues with using React 18 with Amplify UI, but if you find anything please do open a new GitHub issue. Once Radix releases the React 18 package.json changes, we will update and the error message will go away.

In the meantime, you can use the --legacy-peer-deps option to silence the error message:

npm install @aws-amplify/ui-react --legacy-peer-deps

[irl-dan]

Aha, thank you for the insight! Feel free to close this ticket if it just creates spam. I'll keep an eye on the linked issue in radix-ui.

[adilosa]

Looks like radix-ui released the change in 1.0.0! https://github.com/radix-ui/primitives/pull/1329#issuecomment-1191490330

Changelog: https://www.radix-ui.com/docs/primitives/overview/releases

[moltar]

If on NPM > 8 you can use overrides.

  "overrides": {
    "@aws-amplify/ui-react": {
      "@radix-ui/react-accordion": "1.0.0",
      "@radix-ui/react-dropdown-menu": "1.0.0",
      "@radix-ui/react-slider": "1.0.0",
      "@radix-ui/react-tabs": "1.0.0"
    }
  }

[reesscot]

@adilosa Thanks! Yes, we are working on upgrading to the 1.x release of the Radix UI components. @moltar There are a few changes we are working through with the Menu and @radix-ui/react-dropdown-menu dependency, so you may not want to override @radix-ui/react-dropdown-menu quite yet.

Please follow this PR: https://github.com/aws-amplify/amplify-ui/pull/2411

[zchenwei]

Closes this since it was fixed by #2558