1.2.3+ versions are breaking plain javascript/html imports #4666

ajhool · 2020-01-04T10:12:28Z

Describe the bug
Up to version 1.2.2, it was possible to import Amplify as a script in an html page by retrieving the built file from /node_modules/aws-amplify/dist/amplify.js . After version 1.2.2, the script fails to load Tested in 1.2.3, 1.2.4, 2.2.1 and all fail with same error.

Error:

TypeError: _aws_amplify_core__WEBPACK_IMPORTED_MODULE_0__ is undefinedPredictions.js:20:13
    js Predictions.js:20
    Webpack 9
        __webpack_require__
        js
        __webpack_require__
        js
        __webpack_require__
        <anonymous>
        <anonymous>
        webpackUniversalModuleDefinition
        <anonymous>

To Reproduce
Steps to reproduce the behavior (Linux):

Create a new node project which will be used to host the static website

npm init
npm install -g http-server
npm install aws-amplify@1.2.2 --save --save-exact
cp ./node_modules/aws-amplify/dist/amplify.js ./amplify.js

# create an index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  <body>
    <!-- page content -->
    <script type="text/javascript" src="amplify.js"></script> 
  </body>
</html>

http-server

# Visit localhost:8080 and inspect the console, there should not be an amplify error

npm install aws-amplify@1.2.3 --save --save-exact
cp ./node_modules/aws-amplify/dist/amplify.js ./amplify.js

# Visit localhost:8080 and inspect the console, there should be an amplify error

Expected behavior
Amplify is the recommended javascript aws sdk and it must be able to load in plain html / javascript.

N/A

Smartphone (please complete the following information):

Device: Thinkpad
OS: Ubuntu
Browser Mozilla
Version [e.g. 22]

Additional context
Add any other context about the problem here.

Sample code
Include additional sample code or a sample repository to help us reproduce the issue. (Be sure to remove any sensitive data)

You can turn on the debug mode to provide more info for us by setting window.LOG_LEVEL = 'DEBUG'; in your app.

The text was updated successfully, but these errors were encountered:

Amplifiyer · 2020-01-08T00:29:50Z

@ajhool, we updated our webpack config to mark aws-amplify packages as external in amplify in hope to reduce the webpack bundle size but it seems we missed the predictions package. The idea was for clients to include the corresponding bundles (Such as only api + it's dependencies such as core and cache) rather than one giant bundle that includes everything.

Looking at the aws-amplify package, that may not be possible since all of the dependent packages are referenced and so clients would have to include everything. I'm looking to make changes in aws-amplify to package everything in the bundle for now so that it's self sufficient.

ajhool · 2020-01-08T06:22:52Z

@Amplifiyer thanks, there also might have been a minor discussion at some point about hosting amplify on a cdn. That would also be a nice feature. My clients usually have the aws sdk imported via cdn in html/javascript and do not know how to do something similar with Amplify because it is more involved.

#4471

ajhool · 2020-01-10T17:37:23Z

@Amplifiyer additionally, I would like to leverage the modularized import functionality to reduce bundle sizes on plain javascript/html sites, but I am hesitant to do so because the behavior is not well-documented and I'm only confident in importing the whole aws-amplify package.

I'm confident from experience, but not documentation, that importing the aws-amplify package will create a window.["aws-amplify"] module which can be accessed using window["aws-amplify"].default and window["aws-amplify"].Auth but am less certain of the behavior and interactions of modularized imports.

Amplifiyer · 2020-01-20T21:54:37Z

@ajhool as mentioned in the #4471 we have discussed it internally but haven't reached a consensus whether we will be able to do it or not.

Also as you mentioned, we don't have official documentation or support for plain javascript apps as of right now. I'll be fixing the regression so that the full bundle from "aws-amplify" package is usable again. But to make it modularized is something we need to work as a feature request.

…build

Co-authored-by: Sam Martinez <sammartinez19@gmail.com> Co-authored-by: Eric Clemmons <eric@smarterspam.com>

MartijnHarmenzon · 2020-01-29T09:01:51Z

@Amplifiyer @ajhool I am also hoping for a Vanilla JS method and example whith minimal required file sizes. I am trying to keep my websites as small as possible (<14kb gzipped). Adding Amplify or SDK increases the size significantly, while I guess I only want to use the Auth method.

At the moment, to keep file size as small as possible, and to keep Vanilla JS without any frameworks or bundlers, I am following the instructions here:
https://github.com/aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js

By including the following files:

<script src="./aws-sdk-2.610.0.min.js"></script>
<script src="./node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js"></script>

To reduce the size of the aws-sdk-*.min.js file I build a custom SDK which only includes the AWS.CognitoIdentity part, using https://sdk.amazonaws.com/builder/js/.

@Amplifiyer Is this approach using the amazon-cognito-identity.min.js and SDK still maintained? Or is only Amplify maintained?

Amplifiyer · 2020-01-29T19:38:50Z

@MartijnHarmenzon , what you are doing is still valid, in our next major version release (along with aws-sdk) our focus is to provide modularized imports and reduced bundle sizes with Amplify using webpack's tree shaking. However, I'm not sure how that can be beneficial in vanilla JS apps.

…build (aws-amplify#4745) Co-authored-by: Sam Martinez <sammartinez19@gmail.com> Co-authored-by: Eric Clemmons <eric@smarterspam.com>

ameykshirsagar · 2020-11-27T10:10:23Z

I was able to do it in this way. It works perfectly

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./node_modules/aws-amplify/dist/aws-amplify.min.js"></script>
    <script>

        aws_amplify.Amplify.configure({
            // content of aws-exports.js
        });

        try {
            const user = aws_amplify.Amplify.Auth.signIn("<username>", "<pass>");
            console.log(user);
        } catch (error) {
            console.log('error signing in', error);
        }

        try {
            const { user } = aws_amplify.Amplify.Auth.signUp({
                username: "<username>",
                password: "<pass>",
                attributes: {
                    email: "<email>" // optional

                }
            });
            console.log(user);
        } catch (error) {
            console.log('error signing up:', error);
        }
    </script>
</head>
<body>
    
</body>
</html>`

github-actions · 2021-11-28T01:46:56Z

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.

ajhool added the to-be-reproduced Used in order for Amplify to reproduce said issue label Jan 4, 2020

ajhool changed the title ~~2.1.0+ versions are breaking plain javascript/html imports~~ 1.2.3+ versions are breaking plain javascript/html imports Jan 4, 2020

Amplifiyer added Build Related to build issues Modularization and removed to-be-reproduced Used in order for Amplify to reproduce said issue labels Jan 7, 2020

Amplifiyer self-assigned this Jan 7, 2020

Amplifiyer added a commit to Amplifiyer/amplify-js that referenced this issue Jan 21, 2020

fixes: aws-amplify#4666 Remove externals from amplify's root webpack …

14e0f7a

…build

Amplifiyer added a commit to Amplifiyer/amplify-js that referenced this issue Jan 21, 2020

fixes: aws-amplify#4666 Remove externals from amplify's root webpack …

daa3ebc

…build

Amplifiyer mentioned this issue Jan 21, 2020

fixes: #4666 Remove externals from amplify's root webpack build #4745

Merged

Amplifiyer closed this as completed in #4745 Jan 22, 2020

Amplifiyer added a commit that referenced this issue Jan 22, 2020

fixes: #4666 Remove externals from amplify's root webpack build (#4745)

915473b

Co-authored-by: Sam Martinez <sammartinez19@gmail.com> Co-authored-by: Eric Clemmons <eric@smarterspam.com>

ericclemmons added this to the Standalone Bundles milestone Feb 10, 2020

github-actions bot locked as resolved and limited conversation to collaborators Nov 28, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

1.2.3+ versions are breaking plain javascript/html imports #4666

1.2.3+ versions are breaking plain javascript/html imports #4666

ajhool commented Jan 4, 2020

Amplifiyer commented Jan 8, 2020

ajhool commented Jan 8, 2020

ajhool commented Jan 10, 2020

Amplifiyer commented Jan 20, 2020

MartijnHarmenzon commented Jan 29, 2020

Amplifiyer commented Jan 29, 2020

ameykshirsagar commented Nov 27, 2020

github-actions bot commented Nov 28, 2021

1.2.3+ versions are breaking plain javascript/html imports #4666

1.2.3+ versions are breaking plain javascript/html imports #4666

Comments

ajhool commented Jan 4, 2020

Amplifiyer commented Jan 8, 2020

ajhool commented Jan 8, 2020

ajhool commented Jan 10, 2020

Amplifiyer commented Jan 20, 2020

MartijnHarmenzon commented Jan 29, 2020

Amplifiyer commented Jan 29, 2020

ameykshirsagar commented Nov 27, 2020

github-actions bot commented Nov 28, 2021