'AmplifySignOut' 未从“@aws-amplify/ui-react”导出

Question

我今天 运行 处理这个问题，今天才开始。 运行 构建应用程序的通常安装和推送顺序...

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

照常更改 index.js 和 ap.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:

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);

如果我添加 AmplifySignOut，它会抛出错误： 'AmplifySignOut' 未从“@aws-amplify/ui-react”

导出

如果我删除 AmplifySignOut，则会显示登录名，但它没有按照 Amazon 身份验证样式（橙色按钮等）设置的格式。

我可以添加 import '@aws-amplify/ui-react/styles.css'; 并恢复一些样式，但我确实需要恢复它们的工作方式。 任何帮助将不胜感激！

Answer 1

我正在学习 Amplify 教程并遇到了这个障碍。看起来他们 只是 将 React 组件从 1.2.5 升级到 2.0.0 https://github.com/aws-amplify/docs/pull/3793

将 ui-react 降级到 1.2.5 会恢复教程中使用的 AmplifySignOut 和其他组件。

在package.json:

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

或者，您需要查看版本 2 文档以找到合适的替代品：https://ui.docs.amplify.aws/components/authenticator

Answer 2

我遇到了同样的问题，并在 https://ui.docs.amplify.aws/ 找到了答案。我安装了最新版本的@aws-amplify/ui-react。 (npm i aws-amplify @aws-amplify/ui-react)

Answer 3

这是一个结合了最新版本 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;

Answer 4

这肯定能解决问题..

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

... }