“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 进行更改。

索引.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();

应用程序.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

这是一个包含最新版本 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 2

我正在学习 Amplify 教程，但也遇到了这个障碍。看起来他们刚刚将反应组件从 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