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

[abd-almofleh]

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.

[abd-almofleh]

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