[英]'AmplifySignOut' is not exported from '@aws-amplify/ui-react'
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 和 ap.js 进行更改..
index.js: 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:应用程序.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'如果我添加 AmplifySignOut,则会引发错误: 'AmplifySignOut' is not export 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.).如果我删除 AmplifySignOut,则会显示登录名,但它没有按照 Amazon 身份验证样式(橙色按钮等)的格式。
I can add import '@aws-amplify/ui-react/styles.css';
我可以添加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.我正在跟随 Amplify 教程,也遇到了这个障碍。 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看起来他们刚刚将反应组件从 1.2.5 升级到 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.将ui-react
降级到 1.2.5 会带回 AmplifySignOut 和教程中使用的其他组件。
in package.json :在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或者,您需要查看版本 2 文档以找到合适的替代品: 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:这是一个包含最新版本的 ui-react (v2.1.2) 和来自 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/ .我遇到了同样的问题,并在https://ui.docs.amplify.aws/找到了答案。 I installed the most recent version of @aws-amplify/ui-react.我安装了最新版本的 @aws-amplify/ui-react。 (npm i aws-amplify @aws-amplify/ui-react) (npm 我 aws-amplify @aws-amplify/ui-react)
This issue is fixed in the latest ui version.此问题已在最新的 ui 版本中修复。 Add the below dependency in your package.json
file在package.json
文件中添加以下依赖项
"@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:在阅读https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/的文档后,这对我有用:
Adding this to my index.js file:将此添加到我的index.js文件中:
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
Using this for my app.js file:将此用于我的app.js文件:
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:如果您正在关注此动手操作https://aws.amazon.com/getting-started/hands-on/build-react-app-amplify-graphql/module-four/?e=gs2020&p=build-a-react -app-three并在更新前端代码后卡在模块 4 中,然后执行以下操作:
To make the code compatible with the latest version of ui-react v2.1.3, replace the code in the module with this one:为了使代码与最新版本的 ui-react v2.1.3 兼容,请将模块中的代码替换为以下代码:
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须藤 npm 安装 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.我无法解决 AmplifySignOut 但是,这是我在查看 previuos 模块的代码时发现的。 In App.js change在 App.js 中更改
function App() {...}
signature to签名给
function App({ signOut }) {...}
and use html below to add a signout button.并使用下面的 html 添加注销按钮。
<button onClick={signOut}>Sign out</button>
this way you don't need to use any previous version library.这样您就不需要使用任何以前的版本库。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.