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

Question

我收到错误：

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

我正在使用以下链接中显示的放大验证器组件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"

Answer 1

当我最初看到 @senju 的答案（投票！）时，我想，“这只会隐藏问题”。但不，就我而言，eslint 是问题的原因。

我建议不要使用 @senju 的解决方案来禁用所有未解决的导入的警告，而是使用特定于 eslint 的注释来禁用特定的导入：

// eslint-disable-next-line import/no-unresolved
import '@aws-amplify/ui-react/styles.css';

Answer 2

尝试升级aws-amplify到4.3.11或更高版本并升级到最新版本的@aws-amplify/ui-react. 此版本与使用 Webpack 5 的 create-react-app 的最新版本兼容。此问题已在aws-amplify此处修复： https: //github.com/aws-amplify/amplify-js/pull/9358