ResizeObserver loop when navigating in the Authenticator component

Before opening, please confirm:

[X] I have searched for duplicate or closed issues and discussions.
[X] I have read the guide for submitting bug reports.
[X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React

Amplify APIs

Authentication, Storage

Amplify Version

Amplify Categories

auth, storage

Backend

None

Environment information

``` # Put output below this line System: OS: macOS 14.4.1 CPU: (8) arm64 Apple M1 Memory: 170.33 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm Browsers: Chrome: 125.0.6422.112 Safari: 17.4.1 npmPackages: @aws-amplify/auth: ^6.3.4 => 6.3.4 @aws-amplify/auth/cognito: undefined () @aws-amplify/auth/cognito/server: undefined () @aws-amplify/auth/enable-oauth-listener: undefined () @aws-amplify/auth/server: undefined () @aws-amplify/storage: ^6.4.4 => 6.4.4 @aws-amplify/storage/s3: undefined () @aws-amplify/storage/s3/server: undefined () @aws-amplify/storage/server: undefined () @aws-amplify/ui-react: ^6.1.6 => 6.1.12 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-storage: ^3.1.3 => 3.1.3 @testing-library/jest-dom: ^5.17.0 => 5.17.0 @testing-library/react: ^13.4.0 => 13.4.0 @testing-library/user-event: ^13.5.0 => 13.5.0 aws-amplify: ^6.0.25 => 6.3.4 aws-amplify/adapter-core: undefined () aws-amplify/analytics: undefined () aws-amplify/analytics/kinesis: undefined () aws-amplify/analytics/kinesis-firehose: undefined () aws-amplify/analytics/personalize: undefined () aws-amplify/analytics/pinpoint: undefined () aws-amplify/api: undefined () aws-amplify/api/server: undefined () aws-amplify/auth: undefined () aws-amplify/auth/cognito: undefined () aws-amplify/auth/cognito/server: undefined () aws-amplify/auth/enable-oauth-listener: undefined () aws-amplify/auth/server: undefined () aws-amplify/data: undefined () aws-amplify/data/server: undefined () aws-amplify/datastore: undefined () aws-amplify/in-app-messaging: undefined () aws-amplify/in-app-messaging/pinpoint: undefined () aws-amplify/push-notifications: undefined () aws-amplify/push-notifications/pinpoint: undefined () aws-amplify/storage: undefined () aws-amplify/storage/s3: undefined () aws-amplify/storage/s3/server: undefined () aws-amplify/storage/server: undefined () aws-amplify/utils: undefined () ini: ^1.3.5 => 1.3.8 inquirer: ^6.5.1 => 6.5.2 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 react-scripts: 5.0.1 => 5.0.1 web-vitals: ^2.1.4 => 2.1.4 npmGlobalPackages: corepack: 0.25.2 npm: 10.5.0 ```

Describe the bug

I'm using the Authenticator UI component from @aws-amplify/ui-react in my application.

When I use this component in conjunction with a controlled input, and when I navigate to the different tabs in the component, I see a React error overlay.

Expected behavior

I'm using the Authenticator UI component from @aws-amplify/ui-react in my application.

I expect to be able to navigate the tabs in the Authenticator component without seeing any errors.

Reproduction steps

When I navigate between the tabs in the Authenticator app, I see a React error overlay with the following message:

ResizeObserver loop completed with undelivered notifications.
handleError@http://localhost:3000/static/js/bundle.js:49312:58
./node_modules/webpack-dev-server/client/overlay.js/createOverlay/<@http://localhost:3000/static/js/bundle.js:49331:18

Screenshot 2024-05-24 at 4 01 46 PM

Code Snippet


"use client";
import { Amplify } from "aws-amplify";

import awsExports from "./aws-exports";
import { useState } from "react";
import { Authenticator, Input, Label } from "@aws-amplify/ui-react";

Amplify.configure(awsExports);

function App() {
  const [trackTitle, setTrackTitle] = useState("");

  const handleUpdateTitle = (e) => setTrackTitle(e.target.value);

  return (
    <div className="App">
        <Authenticator signUpAttributes={["name"]}>
          {({ signOut, user }) => {

            return (
              <main>
                <h1>Hello {user.name}</h1>
                <button onClick={signOut}>Sign out</button>
              </main>
            );
          }}
        </Authenticator>

          <Input
            id="trackTitle"
            value={trackTitle}
            onChange={handleUpdateTitle}
          />
    </div>
  );
}

export default App;

Log output

``` ResizeObserver loop completed with undelivered notifications. handleError@http://localhost:3000/static/js/bundle.js:49312:58 ./node_modules/webpack-dev-server/client/overlay.js/createOverlay/<@http://localhost:3000/static/js/bundle.js:49331:18 ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

aws-amplify / amplify-ui