'AmplifySignOut' is not exported from '@aws-amplify/ui-react'-CodePudding

I've run into this issue today, and it's only started today. Ran the usual sequence of installs and pushes to build the app...

npx create-react-app exampleapp
npm start
amplify init
amplify add api
Amplify push
npm install aws-amplify @aws-amplify/ui-react
amplify add auth
amplify push

Make my changes to the index.js and ap.js as usual..

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Amplify from 'aws-amplify';
import aws_exports from './aws-exports'

Amplify.configure(aws_exports);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js:

import React from 'react';
import './App.css';
import { withAuthenticator, AmplifySignOut, Authenticator } from '@aws-amplify/ui-react';
import { Amplify, Auth } from 'aws-amplify';
import awsExports from './aws-exports';

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);
Auth.configure(awsconfig);

function App() {
   return (
    <div>
      <h1>Help!</h1>
      <AmplifySignOut />
    </div>
   );
}

export default withAuthenticator(App);

If I add AmplifySignOut it throws the error: 'AmplifySignOut' is not exported from '@aws-amplify/ui-react'

If I remove AmplifySignOut, then the login appears but it has no formatting as per the Amazon Authentication style (orange button etc.).

I can add import '@aws-amplify/ui-react/styles.css'; and I get some styling back, but I really need things back to how the were working. Any help would be appreciated!

CodePudding user response：

I am following along with the Amplify tutorial and hit this roadblock as well. It looks like they just upgraded the react components from 1.2.5 to 2.0.0 https://github.com/aws-amplify/docs/pull/3793

Downgrading ui-react to 1.2.5 brings back the AmplifySignOut and other components used in the tutorials.

in package.json:

"dependencies": {
    "@aws-amplify/ui-react": "^1.2.5",
   ...
}

Alternatively, you'll need to look into the version 2 docs to find suitable replacements: https://ui.docs.amplify.aws/components/authenticator

CodePudding user response：

I had the same issue and found the answer at https://ui.docs.amplify.aws/. I installed the most recent version of @aws-amplify/ui-react. (npm i aws-amplify @aws-amplify/ui-react)