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!
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
Here's an example incorporating a recent version of ui-react (v2.1.2) and the updated docs from ui.docs.amplify:
import React from 'react';
import './App.css';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
function App() {
return (
<Authenticator>
{({ signOut, user }) => (
<div className="App">
<p>
Hey {user.username}, welcome to my channel, with auth!
</p>
<button onClick={signOut}>Sign out</button>
</div>
)}
</Authenticator>
);
}
export default App;
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)