Issue When Upgrading aws-amplify/ui from 2.03 to 3.10.1

Adam C. | 3 years ago

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 aws-amplify-react@4.x.x, 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:

├─┬ aws-amplify-react@5.1.9
│ └── @aws-amplify/ui@2.0.5
└─┬ aws-amplify@4.3.26
  └── @aws-amplify/ui@2.0.5 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:

import "@aws-amplify/ui/dist/style.css";

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

That's it!