Lost in documentation which libraries we should use aws-amplify vs @aws-amplify

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Other

How is your app built?

CRA

What browsers are you seeing the problem on?

No response

Please describe your bug.

I’m lost in the documentation on which amplify libraries I should use. How I understand https://github.com/aws-amplify/amplify-js/wiki/Amplify-Modularization is that you have aws-amplify which contains all the packages and then @aws-amplify/<package> which gives you access to a part of the amplify library. So that your bundle size is reduced.

I tried reading a lot of documentation to understand what the best practices are and it seems that doing @aws-amplify/<package> is the way to go. BUT than if you want to use @aws-amplify/ui-react the first install statement is: yarn add @aws-amplify/ui-react aws-amplify

And the ui-react library is indeed depending on aws-amplify. So does that mean we always have to include the whole library and cannot use a smaller portion of the amplify libs.

Would be nice if someone could clarify this for me. As some people (like first comment on https://github.com/aws-amplify/amplify-js/issues/8333) say you should not mix @aws-amplify/<package> with aws-amplify. Or does that exclude @aws-amplify/ui-react ?

What’s the expected behaviour?

Clear documentation which is understandable.

Help us reproduce the bug!

Not completely sure this is actually a bug but I also could not find a better place to raise this issue.

Code Snippet

// Put your code below this line.

Additional information and screenshots

No response

[chrisbonifacio]

@abdallahshaban557 Assuming that my understanding is correct (see my last message) than I’m fine to close this issue.

Your understanding is correct, but what I meant was that you can have

Package.json "@aws-amplify/ui-react": "^3.5.1", "aws-amplify": "^4.3.20"

and still import the scoped packages like so:

import { Auth } from '@aws-amplify/auth';
import { Storage } from `@aws-amplify/storage`;

if you wanted or needed to 😃

[chrisbonifacio]

To expand a little on what @cwomack mentioned about tree shaking, if you have the aws-amplify package installed you can still import only the scoped packages wherever you need them in your application code.