我得到錯誤消息:
無法解析模塊“@ AWS-amplify/ui-react/styles . CSS”的路徑
我使用的是以下鏈接中顯示的amplify authenticator組件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>
);
總的來說,應用程序運行良好,并且能夠與amplify后端連接。問題是它找不到css樣式。好像不在' @aws-amplify/ui-react '里。我的節點版本是16.13.1。此外,我現在在package.json中使用的是軟件包的最新版本
"@aws-amplify/ui-react": "^2.1.5",
"aws-amplify": "^4.3.10"
最初看到@senju的回答時(upvote it!)我想,& quot那只會掩蓋問題& quot。但是不,在我的情況下,eslint是問題的原因。
與@senju對所有未解決的導入禁用警告的解決方案不同,我建議只對特定的導入禁用警告,并加上特定于eslint的注釋:
// eslint-disable-next-line import/no-unresolved
import '@aws-amplify/ui-react/styles.css';
嘗試將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
我也有同樣的問題。改變我的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"
}
}
]
}
我使用了最新版本的aws-amplify,但仍然在構建時出現錯誤。改變。eslintrc成功了。