无法解析模块“@aws-amplify/ui-react/styles.css”的路径

Posted 2023-02-19

【中文标题】无法解析模块“@aws-amplify/ui-react/styles.css”的路径

【英文标题】：Unable to resolve path to module '@aws-amplify/ui-react/styles.css'

【发布时间】：2022-01-19 18:35:20

【问题描述】：

我收到错误：

我正在使用以下链接https://ui.docs.amplify.aws/components/authenticator#quick-start中显示的放大身份验证器组件

我的后端已经像往常一样配置好了，一切正常。

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 pus

app.js配置如下

import  Amplify  from 'aws-amplify';

import  Authenticator  from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() 
  return (
    <Authenticator>
      ( signOut, user ) => (
        <main>
          <h1>Hello user.username</h1>
          <button onClick=signOut>Sign out</button>
        </main>
      )
    </Authenticator>
  );

一般来说，应用程序运行良好并且能够与放大后端连接。问题是它找不到css样式。似乎不在“@aws-amplify/ui-react”中。我的节点版本是 16.13.1。另外，我现在在 package.json 中使用包的最新版本

"@aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"

【参考方案1】：

尝试将aws-amplify 升级到 4.3.11 或更高版本。此版本与使用 Webpack 5 的最新版 create-react-app 兼容。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。