我得到錯(cuò)誤消息:

無(wú)法解析模塊“@ AWS-amplify/ui-react/styles . CSS”的路徑

我使用的是以下鏈接中顯示的amplify authenticator組件https://ui . docs . amplify . AWS/components/authenticator # quick-start

我已經(jīng)像往常一樣配置了我的后端，并且一切正常。

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

總的來(lái)說(shuō)，應(yīng)用程序運(yùn)行良好，并且能夠與amplify后端連接。問(wèn)題是它找不到css樣式。好像不在' @aws-amplify/ui-react '里。我的節(jié)點(diǎn)版本是16.13.1。此外，我現(xiàn)在在package.json中使用的是軟件包的最新版本

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

最初看到@senju的回答時(shí)(upvote it！)我想，& quot那只會(huì)掩蓋問(wèn)題& quot。但是不，在我的情況下，eslint是問(wèn)題的原因。

與@senju對(duì)所有未解決的導(dǎo)入禁用警告的解決方案不同，我建議只對(duì)特定的導(dǎo)入禁用警告，并加上特定于eslint的注釋:

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

嘗試將aws-amplify升級(jí)到4.3.11或以上版本，并升級(jí)到@aws-amplify/ ui-react的最新版本。該版本與使用Webpack 5的create-react-app的最新版本兼容。此問(wèn)題已在aws-amplify中修復(fù)，網(wǎng)址為: https://github.com/aws-amplify/amplify-js/pull/9358

我也有同樣的問(wèn)題。改變我的eslint設(shè)置對(duì)我有效。

這是我的。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"
      }
    }
  ]
}

我使用了最新版本的aws-amplify，但仍然在構(gòu)建時(shí)出現(xiàn)錯(cuò)誤。改變。eslintrc成功了。