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 <code>aws-amplify-react</code>. &nbsp;As of <code>aws-amplify-react@4.x.x</code>, the Authenticator is not styled, so we had installed the <code>aws-amplify/ui 2.0.3,</code> and imported the style from '<code>@aws-amplify/ui/dist/style.css'</code>. But it stopped working after updating to V3. It throws a ton of “Module not found” errors.&nbsp;<figure class="image"><img src="https://images.unsplash.com/photo-1613806667512-478ce88c5983?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHwxfHxucG18ZW58MHx8fHwxNjU2MzYxOTY2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@jalalkelink?utm_source=DNX&amp;utm_medium=referral">Jalal Kelink</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><blockquote>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)</blockquote>After digging into this, we found out that we don't need to install <code>@aws-amplify/ui</code> at all, because it's a dependency of <code>aws-amplify-react</code>. Try ‘<code>npm list @aws-amplify/ui</code>’, it returns:<pre><code class="language-javascript" id="YmEZDKVdF">├─┬ aws-amplify-react@5.1.9
│ └── @aws-amplify/ui@2.0.5
└─┬ aws-amplify@4.3.26
 └── @aws-amplify/ui@2.0.5 deduped</code></pre>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:<pre><code class="language-javascript" id="dfUo0fpym">import "@aws-amplify/ui/dist/style.css";</code></pre>It would work without installing <code>@aws-amplify/ui.</code> If we install the V3, then there must be some conflicts between the V2 installed by <code>aws-amplify-react</code> and V3 itself.&nbsp;Note that, the ESlint will complaints no package found, like:<blockquote>'@aws-amplify/ui' should be listed in the project's dependencies. Run 'npm i -S @aws-amplify/ui' to add iteslint<a target="_blank" rel="noopener noreferrer" href="https://github.com/import-js/eslint-plugin-import/blob/v2.26.0/docs/rules/no-extraneous-dependencies.md">import/no-extraneous-dependencies</a></blockquote>We could ignore it by adding the line before the import.<pre><code class="language-plaintext" id="rNGv0NtH0">// eslint-disable-next-line import/no-extraneous-dependencies
import "@aws-amplify/ui/dist/style.css";</code></pre>That's it!

My client's website is using AWS Amplify to handle the user log-in via AWS Cognito. 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 then imported the style from '@aws-amplify/ui/dist/style.css'. But it stopped working after updating to V3. Here is the solution.

All Posts In Amplify