@aws-amplify/[email protected] Authenticator component does not work with Gatsby 4.23.0

[kota65535]

Before creating a new issue, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have tried disabling all browser extensions or using a different browser
• [X] I have tried deleting the node_modules folder and reinstalling my dependencies
• [X] I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Gatsby 4.23.0

What browsers are you seeing the problem on?

Chrome

Please describe your bug.

This issue is maybe similar to https://github.com/aws-amplify/amplify-ui/issues/1226.

With the latest Gatsby 4.23.0, upgrading from @aws-amplify/ui-react 3.3.0 to 3.4.0 breaks UI interaction of Authenticator component. I've confirmed the following buttons are not working (nothing happens).

• Sign in button
• Create Account button

What's the expected behaviour?

• Sign in button should let the user sign in
• Create Account button should let the user create account

Help us reproduce the bug!

1. Clone gatsby-starter-default
2. Rewrite index.js to use Authenticator according to this tutorial
3. Run gatsby develop to start server
4. Access to localhost:8000 and then click Sign in button

Code Snippet

index.js is as follows.

// Put your code below this line.

import * as React from "react"
import awsExports from './aws-exports.json';
import {Amplify} from "aws-amplify";
import {Authenticator} from "@aws-amplify/ui-react";
import '@aws-amplify/ui-react/styles.css';

Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({signOut, user}) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

Additional information and screenshots

No response

[slaymance]

I was able to trace this issue to the 3.13.0 release of the @aws-amplify/ui package (a dependency of @aws-amplify/ui-react). @aws-amplify/[email protected] uses the version of the package that bumps the xstate dependency to ^4.33.0 (https://github.com/aws-amplify/amplify-ui/pull/2432).

While we work on a fix to this issue, you can workaround the error by overriding the xstate dependency version used by your application.

Using npm (>= v8)

Add the following block to your project's package.json:

"overrides": {
  "xstate": "4.33"
}

Using yarn

Add the following block to your project's package.json:

"resolutions": {
  "xstate": "4.33"
}