Amplify-js: Modularlization doesnt work with aws-amplify-react?

[bradennapier]

* Which Category is your question related to? *

aws-amplify-react

* What AWS Services are you utilizing? *

auth

* Provide additional details e.g. code snippets *

I am guessing I am missing something but I do not want to include the libs for every single package. I only need auth and nothing else - but importing aws-amplify-react requires @aws-amplify/xr which I am not using and never will.

How do I stop this? Docs seem to indicate I need to custom create aws-amplify-react myself and make it work differently? Why is that not just done by you guys?

As it stands this package makes our bundle 10x larger with a bunch of junk.

The second I include things I get

Module not found: Error: Can't resolve '@aws-amplify/xr' in 'node_modules/aws-amplify-react/dist/XR'
 @ ./node_modules/aws-amplify-react/dist/XR/SumerianScene.js 61:11-37
 @ ./node_modules/aws-amplify-react/dist/XR/index.js
 @ ./node_modules/aws-amplify-react/dist/index.js

Just to be clear I've read this 100 times and it doesn't even make sense to me:

https://github.com/aws-amplify/amplify-js/wiki/Amplify-modularization#apply-modularized-amplify-to-other-packages

says to export then doesnt export or show how things are used anyway - seems to indicate we need to modify the module itself to do those things...

When the @aws-amplify/auth is not imported, Auth would be null or undefined

Check if the module is imported before using any method from the module:
// in aws-amplify-react/src/Auth/SignIn.jsx
    signIn() {

You are literally providing instructions on how to fix your own package here? what gives?

[powerful23]

@bradennapier what components are you using from aws-amplify-react. If you are just using Auth related components like Authenticator, you can do import { Authenticator } from 'aws-amplify-react/dist/Auth' which would avoid importing all the other modules.

[powerful23]

@bradennapier I am going to close this issue. Please let us know if you want to reopen this issue.

[oottinger]

@powerful23

This seems to be an issue if you use the withAuthenticator component.

This works but brings in a lot of extra components like xr.

import Amplify from 'aws-amplify';
import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure({
  Auth: {
    region: '',
    userPoolId: '',
    userPoolWebClientId: '',
  },
});

// withAuthenticator(...)

This does not work and results in errors that @bradennapier reported.

import Auth from '@aws-amplify/auth';
import { withAuthenticator } from 'aws-amplify-react';

Auth.configure({
  region: '',
  userPoolId: '',
  userPoolWebClientId: '',
});

// withAuthenticator(...)

At the bottom of the documentation it sounds like this should be possible - https://aws-amplify.github.io/docs/js/authentication

[kalzoo]

+1. That documentation led me to the same conclusion, and a similar error led me here:

Module not found: Can't resolve '@aws-amplify/analytics' in '...client/node_modules/aws-amplify-react/dist/Analytics'

To be clear, I don't use @aws-amplify/analytics anywhere, and this is a simple app at this point.

The statement in the documentation that an error is only thrown if a not-yet-imported module is referenced is incorrect:

An error will only be thrown when the user clicks the SignIn button and @aws-amplify/auth is not imported.

These both throw that same transpilation error:

import Auth from "@aws-amplify/auth";
import { withAuthenticator } from "aws-amplify-react";
import amplifyConfig from "./config/amplify";

Auth.configure(amplifyConfig);
..
export default withAuthenticator(App);

import Amplify from "@aws-amplify/core";
import { withAuthenticator } from "aws-amplify-react";
import amplifyConfig from "./config/amplify"; // Pushed under an "Auth" key

Amplify.configure(amplifyConfig);
...
export default withAuthenticator(App);

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jordanranz]

As @powerful23 mentioned, if you would like to use modularization with aws-amplify-react in the current state you will need to import the React component from dist like so:

import Auth from "@aws-amplify/auth";
import { Authenticator } from 'aws-amplify-react/dist/Auth'

@kalzoo @oottinger, could you try this solution?

In the meantime we are in the process of refactoring our codebase to improve modularization and the UI components as well. I will add this issue to those milestones to investigate.

[stale[bot]]

This issue has been automatically closed because of inactivity. Please open a new issue if are still encountering problems.

[paalex]

As @powerful23 mentioned, if you would like to use modularization with aws-amplify-react in the current state you will need to import the React component from dist like so:

import Auth from "@aws-amplify/auth";
import { Authenticator } from 'aws-amplify-react/dist/Auth'

@kalzoo @oottinger, could you try this solution?

In the meantime we are in the process of refactoring our codebase to improve modularization and the UI components as well. I will add this issue to those milestones to investigate.

@jordanranz I tried on "aws-amplify-react": "^3.1.5" and 2.6.3 as well and there's no Auth in the dist folder of the project.
Following #4279, Importing from lib folder leads to the following error Can't resolve '@aws-amplify/ui'.
Any ideas? Thanks

[0xdevalias]

~Having the same issue as @paalex above. Would be good to have a better resolution to this.~

For anyone who ends up here like I did, checkout this for a more up to date (and almost released!) solution: https://github.com/aws-amplify/amplify-js/issues/3365#issuecomment-601457386