Upgrade @xstate/react to the latest that support React 19

[Aborii]

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.

In the package @aws-amplify/ui-react-core it gives warning of a Conflicting peer dependency after updating react to V19.

Please describe a solution you'd like.

The package @xstate/[email protected] support React up to ^V18. They released an update @xstate/[email protected] that now add React V19 as a peer dependency.

Thanks

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.

[jordanvn]

Hi @abd-almofleh 👋 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.

[Aborii]

Thank you, @jordanvn. I will keep you posted.

[ataylorme]

@jordanvn I am using xstate and @xstate/react version 5.x in my project and it is causing conflicts with the Amplify UI versions I can't seem to resolve, even with overrides.

edit I was able to get this working with following steps below. Hopefully this helps someone else.

1. adding alias entries to package.json for the older xstate and @xstate/react versions

{
  "dependencies": {
    "@xstate/react": "^5.0.2",
    "@xstate/react3": "npm:@xstate/react@^3.2.2",
    "xstate": "^5.19.2",
    "xstate4": "npm:xstate@^4.33.6"
  }
}

2. updating next.config.ts to override the imports @aws-amplify packages use

import path from "node:path";
import type { NextConfig } from "next";
import { webpack } from "next/dist/compiled/webpack/webpack";

const nextConfig: NextConfig = {
  webpack: (config, { isServer }) => {
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(
        /^xstate$/,
        (resource: { context: string | string[]; request: string }) => {
          if (
            resource.context?.includes(
              path.join("node_modules", "@aws-amplify"),
            )
          ) {
            resource.request = resource.request.replace("xstate", "xstate4");
            resource.request = resource.request.replace(
              "@xstate/react",
              "@xstate/react3",
            );
          }
        },
      ),
    );

    return config;
  },
};

export default nextConfig;

3. Running npm install --force

[astraops-arunv]

@jordanvn We are also facing the same issue with vite based react application where amplify uses outdated xstate version and we are trying to use xstate v5. we even tried to add pnpm alias for both xstate and @xstate/react but couldn't get it into working. Kindly update the xstate and @xstate/react version in this amplify package.

[pranavosu]

Hi @astraops-arunv, we'll get back with more information about this update. But with pnpm, you would want to use pnpm overrides instead of aliases to workaround this issue.

[bbodien]

Hi @astraops-arunv, we'll get back with more information about this update. But with pnpm, you would want to use pnpm overrides instead of aliases to workaround this issue.

Unfortunately pnpm overrides doesn't allow you to reference split versions like aliasing would, it merely lets you specify an override for a single version to use across the project. Since Strapi and Amplify UI require v5 and v4 of xstate respectively and v5 isn't backward compatible, this is still an issue.

[adrianjoshua-strutt]

Hi @bbodien, thank you for bringing up this issue. We are actively looking into this ticket and will get back to you with any updates.

[codenimble]

Also using pnpm and want to use xstate v5 in our project. Seems like this fixed dependency should be scoped and handled internally to the amplify project.

The other option I believe is just don't use Amplify UI.

[kedbirhan]

Forcing @xstate/react to use React 19 is the recommended approach to resolve this issue until an official fix is released.

[bobbor]

hey @kedbirhan @bbodien

the issue is actually not just with @xstate/react alone.

if we bump the react-bindings for xstate by 2 major versions, we need to bump xstate itself. As soon as we have done that, we need to bump bindings for all other frameworks which use xstate (e.g. vue) This might result in a bump of the base frameworks itself. And this we cannot do as minor fix. So it would move in the next major release of Amplify UI.

But these are a lot of if's and maybe's. At the moment we are still investigating and inform you about the outcome.

Cheers Philipp.