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)
This issue is fixed in the latest ui version. Add the below dependency in your package.json
file
"@aws-amplify/ui-react": "^2.1.4",
After reading the doc at https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/ , this is what worked for me:
Adding this to my index.js file:
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Using this for my app.js file:
import { Amplify } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
Amplify.configure(awsExports);
function App({ signOut, user }) {
return (
<>
<h1>Hello {user.username}</h1>
<button onClick={signOut}>Sign out</button>
</>
);
}
export default withAuthenticator(App);
This surely solves the problem..
"dependencies": {
"@aws-amplify/ui-react": "^1.2.5",
... }
If you are following this hands-on https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-four/?e=gs2020&p=build-a-react-app-three and are stuck in module 4 after updating the front end code, then do this:
To make the code compatible with the latest version of ui-react v2.1.3, replace the code in the module with this one:
import React, { useState, useEffect } from 'react';
import './App.css'; import { API } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import { listNotes } from './graphql/queries';
import { createNote as createNoteMutation, deleteNote as deleteNoteMutation } from './graphql/mutations';
const initialFormState = { name: '', description: '' }
function App() { const [notes, setNotes] = useState([]); const [formData, setFormData] = useState(initialFormState);
useEffect(() => {
fetchNotes(); }, []);
async function fetchNotes() {
const apiData = await API.graphql({ query: listNotes });
setNotes(apiData.data.listNotes.items); }
async function createNote() {
if (!formData.name || !formData.description) return;
await API.graphql({ query: createNoteMutation, variables: { input: formData } });
setNotes([ ...notes, formData ]);
setFormData(initialFormState); }
async function deleteNote({ id }) {
const newNotesArray = notes.filter(note => note.id !== id);
setNotes(newNotesArray);
await API.graphql({ query: deleteNoteMutation, variables: { input: { id } }}); }
return (
<div className="App">
<h1>My Notes App</h1>
<input
onChange={e => setFormData({ ...formData, 'name': e.target.value})}
placeholder="Note name"
value={formData.name}
/>
<input
onChange={e => setFormData({ ...formData, 'description': e.target.value})}
placeholder="Note description"
value={formData.description}
/>
<button onClick={createNote}>Create Note</button>
<div style={{marginBottom: 30}}>
{
notes.map(note => (
<div key={note.id || note.name}>
<h2>{note.name}</h2>
<p>{note.description}</p>
<button onClick={() => deleteNote(note)}>Delete note</button>
</div>
))
}
</div>
<withAuthenticator />
</div> ); }
export default withAuthenticator(App);
I also have same issue but below command worked perfectly for me.
sudo npm install aws-amplify @aws-amplify/ui-react@v1
I could not resolve the AmplifySignOut but, here's what i found looking at a previuos module's code. In App.js change
function App() {...}
signature to
function App({ signOut }) {...}
and use html below to add a signout button.
<button onClick={signOut}>Sign out</button>
this way you don't need to use any previous version library.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.