My script cannot import Authenticator from aws-amplify - does that mean it did not install correctly?

Question

I recently installed aws amplify using

npm install -g @aws-amplify/cli@latest

I am using the basic script verbatim from the aws-amplify site:

import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
//import '@aws-amplify/ui-react/styles.css';
import '@aws-amplify/ui/dist/style.css';


import awsExports from '../../aws-exports';
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>
  );
}

I am receiving an error that Module '"@aws-amplify/ui-react"' has no exported member 'Authenticator'.ts(2305)

I am using aws-amplify version 8.5. The backend is configured correctly. I am able to import "withAuthenticator". Does this mean it did not install correctly? I uninstalled and reinstalled it but still get the error. How can I import the Authenticator from the aws-amplify module? Thanks!

Answer 1

It sounds like you are using v1 of @aws-amplify/ui-react. Your example command installs the latest version of the CLI, but not the @aws-amplify/ui-react package. Please try updating to the latest version of @aws-amplify/ui-react:

npm install @aws-amplify/ui-react@latest

Also, you will want to change your CSS styles import to the line you've commented out:

import '@aws-amplify/ui-react/styles.css';

See https://ui.docs.amplify.aws/getting-started/installation