无法解析模块“@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

尝试将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

Answer 2

我遇到过同样的问题。 更改我的eslint设置对我有用。

这是我的.eslintrc

{
  "extends": [
    "next",
    "next/core-web-vitals",
    "prettier",
    "plugin:testing-library/react",
    "plugin:import/recommended",
    "plugin:import/warnings",
    "plugin:storybook/recommended"
  ],
  "rules": {
    "import/no-unresolved": "off", //add
    "import/order": [
      "error",
      {
        "alphabetize": {
          "order": "asc"
        }
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.stories.@(ts|tsx|js|jsx|mjs|cjs)"],
      "rules": {
        "storybook/hierarchy-separator": "error",
        "storybook/default-exports": "off"
      }
    }
  ]
}

Answer 3

当我最初看到@senju 的回答（赞成）时，我想。 “那只会隐藏问题”，但是没有。 在我的情况下， eslint 是问题的原因。

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

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

Answer 4

我使用了最新版本的 aws-amplify，但在构建时仍然出现错误。 Changing.eslintrc 有效。