react 19 support

[oste]

As expected, I'm encountering a dependency error when running npm install with the latest versions of Next.js and React 19 RC. I'm wondering if there’s a way to make Amplify UI work with React 19, or if there’s a planned roadmap for adding support for react 19. Thanks!

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-66855b96-20241106" from [email protected]
npm error   apps/blog
npm error     [email protected]
npm error     node_modules/blog
npm error       workspace apps/blog from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.14.0 || ^17.0 || ^18.0" from @aws-amplify/[email protected]
npm error node_modules/@aws-amplify/ui-react
npm error   @aws-amplify/ui-react@"^6.5.5" from [email protected]
npm error   apps/blog
npm error     [email protected]
npm error     node_modules/blog
npm error       workspace apps/blog from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

[cwomack]

Hello, @oste and thank you for opening this issue. We'll mark this as a feature request since the versions mentioned here are still release candidates, but we'll update this issue as soon as we have support for the released versions. Thanks!

If you're using JavaScript, things should still work but this has not been fully tested yet. Per the error message you've listed, you can use the --legacy-peer-deps command as well to test this if you'd like.

[oste]

I did try legacy peer deps but didn’t have success but maybe that’s another issue with my dependency tree

[dindjarinjs]

Just tried the following commands and I didn't get any errors:

npx create-next-app test-react-19 # creates a Nextjs project using React 19RC
cd test-react-19
npm install aws-amplify @aws-amplify/ui-react --legacy-peer-deps

Output:

➜  test-react-19 git:(main) npm install aws-amplify @aws-amplify/ui-react --legacy-peer-deps
added 232 packages, and audited 269 packages in 10s

16 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Maybe try --force? What version of npm are you using? I'm using npm 10.2.4.

[10000leaves]

When will this update be released?

[10000leaves]

Are you all on Christmas break? 😢

[ostehost]

I kinda thought this might work using gitpkg but I am getting "can't find module"

"@aws-amplify/ui-react": "https://gitpkg.vercel.app/aws-amplify/amplify-ui/packages/react?main",

[morganney]

Shouldn't this be reopened due to #6278

[jordanvn]

Re-opening this issue as the released changes were rolled back to address an introduced regression

[gurkarangulati]

Is there another way to enable this/manual edit or do we have to wait follow this PR/review to have React 19 compatibility?

[calebpollman]

Experimental support for react@19 in the Amplify UI React packages are available by installing with the react-19 npm dist-tag:

# npm
npm i -S @aws-amplify/ui-react@react-19

# yarn
yarn add @aws-amplify/ui-react@react-19

[ostehost]

I have tried the @aws-amplify/ui-react@react-19 packages and I am running into an issue with the Authenticator component related to xstate.

Installing @xstate/react fixes the issue but I wanted to raise it here anyway since I didn't see it as a peerDep. It looks like only xstate is a peerDep here https://github.com/aws-amplify/amplify-ui/blob/b1be9abaa72d4cd9eef57574fd2269adaf376da1/packages/ui/package.json#L56C1-L60C5

dev: ./apps/blog/node_modules/@aws-amplify/ui/dist/esm/machines/authenticator/index.mjs:1:1
admin:dev: Module not found: Can't resolve 'xstate'
admin:dev: > 1 | import { createMachine, forwardTo, assign, spawn, actions } from 'xstate';
admin:dev:     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
admin:dev:   2 | import '@aws-amplify/core/internals/utils';
admin:dev:   3 | import '../../utils/setUserAgent/constants.mjs';
admin:dev:   4 | import { isEmptyObject } from '../../utils/utils.mjs';

[cwomack]

@ostehost, can you try the following steps to see if it resolves the issue?

1. Delete your package-lock.json file
2. Delete your node_modules folder
3. Reinstall dependencies with npm install

[ostehost]

@cwomack I was actually getting a different error related to rendering array as react child before doing just as you suggested and then I ran into the xstate issue.

[ostehost]

@cwomack I did try to run npm remove @xstate/react and then tried the steps you listed again and this time I am getting

dev: Module not found: Can't resolve 'qrcode'                                                                      admin:dev: > 1 | import QRCode from 'qrcode';                                                                            admin:dev:     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^                                                                            dev:   2 | import * as React from 'react';
dev:   3 | import { ConsoleLogger } from 'aws-amplify/utils';
dev:   4 | import { authenticatorTextUtil, getTotpCodeURL } from '@aws-amplify/ui';

[calebpollman]

@ostehost Can you provide an example app reproducing the behavior? Have been unable to reproduce from our side

[morganney]

Might want to wait to close the issue until a stable version supporting react 19 is published. Doesn't seem to be available anywhere, at least until #6292 is merged.

[zxkane]

After upgrading to amplify ui-react to 6.9.0 with React 19 support, see below warnings:

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @xstate/[email protected]
npm warn Found: [email protected]
npm warn node_modules/react
npm warn   react@"^19.0.0" from the root project
npm warn   55 more (@aws-amplify/ui-react, @aws-amplify/ui-react-ai, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @xstate/[email protected]
npm warn node_modules/@aws-amplify/ui-react-core/node_modules/@xstate/react
npm warn   @xstate/react@"^3.2.2" from @aws-amplify/[email protected]
npm warn   node_modules/@aws-amplify/ui-react-core
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @xstate/[email protected]
npm warn   node_modules/@aws-amplify/ui-react-core/node_modules/@xstate/react
npm warn     @xstate/react@"^3.2.2" from @aws-amplify/[email protected]
npm warn     node_modules/@aws-amplify/ui-react-core
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: @xstate/[email protected]
npm warn Found: [email protected]
npm warn node_modules/react
npm warn   react@"^19.0.0" from the root project
npm warn   55 more (@aws-amplify/ui-react, @aws-amplify/ui-react-ai, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @xstate/[email protected]
npm warn node_modules/@aws-amplify/ui-react/node_modules/@xstate/react
npm warn   @xstate/react@"^3.2.2" from @aws-amplify/[email protected]
npm warn   node_modules/@aws-amplify/ui-react
npm warn
npm warn Conflicting peer dependency: [email protected]
npm warn node_modules/react
npm warn   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @xstate/[email protected]
npm warn   node_modules/@aws-amplify/ui-react/node_modules/@xstate/react
npm warn     @xstate/react@"^3.2.2" from @aws-amplify/[email protected]
npm warn     node_modules/@aws-amplify/ui-react

@aws-amplify/ui-react depends on @xstate/react@"^3.2.2" which requires React 18.x.

[morganney]

@zxkane similar to what I reported on their last release supporting React 19: #5826 (comment).

Seems they're having a hard time managing dependencies.

[cwomack]

@zxkane and @morganney, We're aware of these peer dependency warnings related to @xstate/react and React 19 compatibility. While these warnings appear during installation, they should not impact the functionality or usage of @aws-amplify/ui-react with React 19. The dependency on @xstate/react is internal to our implementation, and we've verified that the components continue to work as expected with React 19. You can safely ignore these npm warnings.

We appreciate you both bringing this to our attention and will continue to monitor for any actual impact on functionality. If you encounter any specific functional issues, please let us know.

[morganney]

@cwomack Maybe the amplify team is accustomed to ignoring warnings but I’m not. What would be better is to upgrade to a version of your dependencies that support react 19. Why aren’t you upgrading to @xstate/react 5.0.2?