My client's website is using AWS Amplify to handle the user log-in via AWS Cognito. It's quick to set up the login using
aws-amplify-react. As of
firstname.lastname@example.org, the Authenticator is not styled, so we had installed the
aws-amplify/ui 2.0.3, and imported the style from '
@aws-amplify/ui/dist/style.css'. But it stopped working after updating to V3. It throws a ton of “Module not found” errors.
Package path ./dist/style.css is not exported from package /Users/PROJECT/node_modules/@aws-amplify/ui (see exports field in /Users/PROJECT/node_modules/@aws-amplify/ui/package.json)
After digging into this, we found out that we don't need to install
@aws-amplify/ui at all, because it's a dependency of
aws-amplify-react. Try ‘
npm list @aws-amplify/ui’, it returns:
├─┬ email@example.com │ └── @firstname.lastname@example.org └─┬ email@example.com └── @firstname.lastname@example.org deduped
Since we don't use any UI elements except the login form, so there is no point to install the whole package of @aws-amplify/ui. Just import the the style like this:
It would work without installing
@aws-amplify/ui. If we install the V3, then there must be some conflicts between the V2 installed by
aws-amplify-react and V3 itself.
Note that, the ESlint will complaints no package found, like:
'@aws-amplify/ui' should be listed in the project's dependencies. Run 'npm i -S @aws-amplify/ui' to add iteslintimport/no-extraneous-dependencies
We could ignore it by adding the line before the import.
// eslint-disable-next-line import/no-extraneous-dependencies import "@aws-amplify/ui/dist/style.css";