ResizeObserver loop when navigating in the Authenticator component

[juanojeda]

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

v6

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

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

[cwomack]

Hello, @juanojeda and hoping we can help unblock you here. Can you confirm if you are using any browser extensions that may manipulate the DOM in any way? Also, have you tried to see if the Auth API's outside of the Authenticator component to see if they have the same result?

[esauerbo]

Hi @juanojeda are you still having this issue? Are you doing anything in your application that would cause the Authenticator to re-render?

[reesscot]

Closing this one out as we haven't heard back. If you're still having this issue, please open a new issue.