Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

aws-amplify package too heavy @Next.JS even with tree-shaking.

See original GitHub issue

Before opening, please confirm:

I have searched for duplicate or closed issues and discussions.
I have read the guide for submitting bug reports.
I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

React, Next.js

Amplify APIs

Authentication, GraphQL API, DataStore

Amplify Categories

auth, storage, api, hosting

Environment information

# Put output below this line

 System:
    OS: macOS 11.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Memory: 311.82 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.2.0 - /usr/local/bin/node
    Yarn: 1.22.15 - ~/Documents/workxp-platform/node_modules/.bin/yarn
    npm: 7.15.0 - ~/node_modules/.bin/npm
  Browsers:
    Chrome: 94.0.4606.81
    Safari: 15.0
  npmPackages:
    @ampproject/toolbox-optimizer:  undefined ()
    @atlaskit/spinner: ^15.1.2 => 15.1.2 
    @atlaskit/spinner/constants:  undefined ()
    @atlaskit/spinner/spinner:  undefined ()
    @atlaskit/spinner/types:  undefined ()
    @babel/core:  undefined ()
    @fortawesome/fontawesome-svg-core: ^1.2.36 => 1.2.36 
    @fortawesome/free-brands-svg-icons: ^5.15.4 => 5.15.4 
    @fortawesome/free-solid-svg-icons: ^5.15.4 => 5.15.4 
    @fortawesome/react-fontawesome: ^0.1.15 => 0.1.15 
    @fullcalendar/common: ^5.9.0 => 5.9.0 
    @fullcalendar/core: 5.9.0 => 5.9.0 
    @fullcalendar/daygrid: ^5.9.0 => 5.9.0 
    @fullcalendar/interaction: 5.9.0 => 5.9.0 
    @fullcalendar/react: ^5.9.0 => 5.9.0 
    @next/bundle-analyzer: ^11.1.2 => 11.1.2 
    @vercel/nft:  undefined ()
    amazon-cognito-identity-js: ^5.2.0 => 5.2.0 
    amphtml-validator:  undefined ()
    arg:  undefined ()
    async-retry:  undefined ()
    async-sema:  undefined ()
    aws-amplify: ^4.3.2 => 4.3.2 
    bfj:  undefined ()
    cacache:  undefined ()
    chart.js: 3.5.1 => 3.5.1 
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    check-password-strength: ^2.0.3 => 2.0.3 
    ci-info:  undefined ()
    classnames: 2.3.1 => 2.3.1 (2.2.6)
    cli-select:  undefined ()
    comment-json:  undefined ()
    compression:  undefined ()
    compression-webpack-plugin: ^9.0.0 => 9.0.0 
    conf:  undefined ()
    content-type:  undefined ()
    cookie:  undefined ()
    cross-env: ^7.0.3 => 7.0.3 
    cross-spawn:  undefined ()
    crypto-browserify: ^3.12.0 => 3.12.0 
    css-loader:  undefined ()
    debug:  undefined ()
    devalue:  undefined ()
    dropzone: 5.9.3 => 5.9.3 
    email-validator: ^2.0.4 => 2.0.4 
    escape-string-regexp:  undefined ()
    file-loader:  undefined ()
    find-cache-dir:  undefined ()
    find-up:  undefined ()
    fresh:  undefined ()
    fullcalendar: ^5.9.0 => 5.9.0 
    glob:  undefined ()
    gzip-size:  undefined ()
    http-proxy:  undefined ()
    ignore-loader:  undefined ()
    is-animated:  undefined ()
    is-docker:  undefined ()
    is-wsl:  undefined ()
    json-parse-better-errors: ^1.0.2 => 1.0.2 
    json5:  undefined ()
    jsonwebtoken:  undefined ()
    loader-utils:  undefined ()
    lodash.curry:  undefined ()
    log-symbols: ^5.0.0 => 5.0.0 
    lru-cache:  undefined ()
    mini-css-extract-plugin:  undefined ()
    moment: 2.29.1 => 2.29.1 
    nanoid:  undefined ()
    neo-async:  undefined ()
    next: ^11.1.2 => 11.1.2 
    next-compose-plugins: 2.2.1 => 2.2.1 
    next-fonts: 1.5.1 => 1.5.1 
    next-transpile-modules: ^8.0.0 => 8.0.0 
    nouislider: 15.5.0 => 15.5.0 
    ora:  undefined ()
    password-validator: ^5.1.1 => 5.1.1 
    path: 0.12.7 => 0.12.7 
    postcss: ^8.3.9 => 8.3.9 (8.2.15)
    postcss-flexbugs-fixes:  undefined ()
    postcss-loader:  undefined ()
    postcss-preset-env:  undefined ()
    postcss-scss:  undefined ()
    pretty-checkbox: ^3.0.3 => 3.0.3 
    prop-types: 15.7.2 => 15.7.2 
    rc-checkbox: ^2.3.2 => 2.3.2 
    react: ^17.0.2 => 17.0.2 
    react-anchor-link-smooth-scroll: ^1.0.12 => 1.0.12 
    react-bootstrap-sweetalert: 5.2.0 => 5.2.0 
    react-checkmark: ^1.4.0 => 1.4.0 
    react-copy-to-clipboard: 5.0.4 => 5.0.4 
    react-datetime: 3.1.1 => 3.1.1 
    react-dom: ^16.8.0 => 16.14.0 
    react-jvectormap: 0.0.16 => 0.0.16 
    react-light-accordion: ^0.1.4 => 0.1.4 
    react-loading-skeleton: ^2.2.0 => 2.2.0 
    react-notification-alert: 0.0.13 => 0.0.13 
    react-perfect-scrollbar: 1.5.8 => 1.5.8 
    react-quill: 1.3.5 => 1.3.5 
    react-tagsinput: 3.19.0 => 3.19.0 
    react-toastify: ^8.0.3 => 8.0.3 
    reactstrap: 8.10.0 => 8.10.0 
    recast:  undefined ()
    resolve-url-loader:  undefined ()
    sass: ^1.42.1 => 1.42.1 
    sass-loader:  undefined ()
    schema-utils:  undefined ()
    semver:  undefined ()
    send:  undefined ()
    slugify: ^1.6.1 => 1.6.1 
    source-map:  undefined ()
    source-map-explorer: ^2.5.2 => 2.5.2 
    stream: ^0.0.2 => 0.0.2 
    string-hash:  undefined ()
    strip-ansi:  undefined ()
    terser:  undefined ()
    text-table:  undefined ()
    unistore:  undefined ()
    validator: ^13.6.0 => 13.6.0 
    web-vitals:  undefined ()
    webpack: ^5.58.1 => 5.58.1 ()
    webpack-bundle-analyzer: ^4.4.2 => 4.4.2 (4.3.0)
    webpack-sources:  undefined ()
    yarn: ^1.22.15 => 1.22.15 
    zen-observable:  undefined ()
  npmGlobalPackages:
    @aws-amplify/cli: 6.3.1
    @nestjs/cli: 7.5.6
    babel-cli: 6.26.0
    codesandbox: 2.2.1
    create-react-app: 3.4.1
    cross-env: 7.0.3
    expo-cli: 3.17.16
    firebase-tools: 9.18.0
    next: 10.0.6
    nodemon: 2.0.4
    npm-check-updates: 11.8.3
    npm: 8.0.0
    npx: 10.2.2
    prisma: 1.34.10
    prisma1: 1.34.11
    react-dom: 17.0.1
    react: 17.0.1
    source-map-explorer: 2.5.2
    yarn: 1.22.10

Describe the bug

I have seen so many posts that say, for example, if I import Auth from @aws-amplify/auth instead of aws-amplify, I’ll be able to minimize the size of the package. However, it seems like none of the methods works for Auth, DataStore, etc. I don’t know if aws-amplify now provides automatic tree-shaking.

Above is the screenshot of the log after npm run build if I remove the aws-amplify package except for import { Amplify } from "@aws-amplify/core";

And above is what happens if I import withSSRContext. It really makes me hesitate to import anything from aws-amplify in _app.js, since as you know the structure, all the other page files are wrapped by _app.js, and I often have to import the same package again in individual pages, which makes each page >300kB.

Could you clarify how big the aws-amplify or each DataStore from @aws-amplify/datastore should typically be? @chrisbonifacio

Expected behavior

I don’t know if it is natural to be heavy.

Reproduction steps

You could set up an empty Next.JS project. Then, you could import and use the aws-amplify packages, such as Auth, DataStore, etc. You could run npm run build to see how big that is. If they are not heavy on your computer, there must be something wrong here🤔

Code Snippet

// Put your code below this line.
import React, { useEffect } from "react";
import App from "next/app";
import Head from "next/head";
import { Amplify } from "@aws-amplify/core";
//import "@aws-amplify/ui/dist/style.css";

// bootstrap rtl for rtl support page
import "assets/vendor/bootstrap-rtl/bootstrap-rtl.scss";
// plugins styles from node_modules
import "react-notification-alert/dist/animate.css";
import "react-perfect-scrollbar/dist/css/styles.css";
// plugins styles downloaded
import "@fullcalendar/common/main.min.css";
import "@fullcalendar/daygrid/main.min.css";
import "assets/vendor/sweetalert2/dist/sweetalert2.min.css";
import "assets/vendor/select2/dist/css/select2.min.css";
import "assets/vendor/nucleo/css/nucleo.css";
import "assets/vendor/@fortawesome/fontawesome-free/css/all.min.css";

import "react-toastify/dist/ReactToastify.css";

// core styles
import "assets/scss/nextjs-argon-dashboard-pro.scss?v1.0.0";
import "pretty-checkbox/src/pretty-checkbox.scss";
import awsmobile from "../src/aws-exports";
import { withSSRContext, Auth, DataStore } from "aws-amplify";

Amplify.configure({ ...awsmobile, ssr: true });

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    const { Auth } = withSSRContext(ctx);
    try {
      const { attributes } = await Auth.currentAuthenticatedUser();
      console.log(attributes);
    } catch (error) {
      console.log(error);
    }
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }
  render() {
    const { Component, pageProps } = this.props;

    const Layout = Component.layout || (({ children }) => <>{children}</>);

    return (
      <React.Fragment>
        <Head>
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          <title>WorkXP</title>
          <script
            src="https://kit.fontawesome.com/5a9f41053c.js"
            crossOrigin="anonymous"
          ></script>
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </React.Fragment>
    );
  }
}

export default MyApp;