Large JavaScript build

[cliffordh]

I have the latest aws amplify code. I've run "amplify add storage", "add auth", "add hosting". However, the final javascript includes GraphQL. Is it possible bundle only the components that I'm using and not pull in other pieces like GraphQL? Note, I am using this with Vue.js.

[elorzafe]

@cliffordh have you tried importing modularized categories?

For example
https://aws-amplify.github.io/docs/js/authentication#using-modular-imports
https://aws-amplify.github.io/docs/js/storage#using-modular-imports

[cliffordh]

@elorzafe Thanks, I hadn't discovered this ability in most online examples. I'm trying to go modular using Vue with aws-amplify-vue. But I'm not sure how to go modular for this code:

import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import aws_exports from './aws-exports';

Amplify.configure(aws_exports)
Vue.use(AmplifyPlugin, AmplifyModules)

I've done this:

import Amplify from '@aws-amplify/core'

But can't figure out how to pass a subset of AmplifyModules to Vue. Keep getting this error:

Uncaught (in promise) TypeError: Cannot read property 'Logger' of undefined
at VueComponent._callee$ (aws-amplify-vue.common.js?19b2:3257)
at tryCatch (runtime.js?96cf:62)
at Generator.invoke [as _invoke] (runtime.js?96cf:288)
at Generator.prototype.(:8080/anonymous function) [as next] (webpack-internal:///./node_modules/regenerator-runtime/runtime.js:114:21)
at asyncGeneratorStep (aws-amplify-vue.common.js?19b2:6805)
at _next (aws-amplify-vue.common.js?19b2:6827)
at eval (aws-amplify-vue.common.js?19b2:6834)
at new Promise ()
at VueComponent.eval (aws-amplify-vue.common.js?19b2:6823)
at VueComponent.mounted (aws-amplify-vue.common.js?19b2:3288)

Thanks.

[cliffordh]

I debugged the module passing issue and got things working with Vue and modular imports. For anyone who's interested, I replaced "import * as AmplifyModules" with:

import { Logger } from '@aws-amplify/core'
import { I18n } from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'
import { AuthClass } from '@aws-amplify/auth'

and use it like this:

Vue.use(AmplifyPlugin, { AuthClass, Auth, Logger, I18n })

Hope this helps someone

[jkeys-ecg-nmsu]

@cliffordh I think most people are using Angular or React, but it's awesome to see RL Vue examples. Thanks for posting your solution!

[Christilut]

@cliffordh Thanks, was looking for exactly this!

[mapkbalaji]

@cliffordh Hi, although I tried importing the way you suggested, I get the same error.

"Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined" "

followed by

"Cannot read property 'Logger' of undefined"

Any thoughts on this?

[ot-dchristopher]

The funny thing is that the error has confused all of us yet it's as clear as day: it is not about finding the Logger (which is what most suggestions are trying to address) but rather that the parent object is undefined. In our cases, if you look at the stack traces, it's complaining on this line: ... this.$Amplify.Logger('Connect') ...

So ... it is $Amplify that isn't set up ... forget the other modules. The following is a quick fix in Vue (at the end of your main.js or main.ts):
Vue.prototype.$Amplify = Amplify;

I hope this helps ...

[rohitrameshrao]

I added Vue.prototype.$Amplify = Amplify; in main.js. Not working either :(

Its now 3rd straight day on aws amplify vue authentication and it just doesn't work. Getting rid of Amplify for now.

[ot-dchristopher]

@rohitrameshrao I would place that line at the very end of main.js, just an FYI.

There are many reasons not to like Amplify but this shouldn't be one of them. How about "one size fits all" approaches to commonly encountered problems? How about the lack of granularity in the encapsulation of the AWS SDK? How about the risk of getting out of sync (between code and infrastructure) and having to blow away your infrastructure, gasp, in production? How about the fact that Amplify does not anticipate or handle well the very problems that it creates? (like, "I created too many stacks for you and now I can't move forward")

Amplify works great for POCs and for very well curated production projects (read: by someone who knows what they're doing and the requirements are tight). In the hands of novices or in environments that are in constant flux, it quickly becomes a nightmare.

[bmilesp]

Hello I'm still getting this Logger error after using @cliffordh 's solution. I cannot seem to get this to work with the amplify-authenticator component with the router plugin.

I'm using the router in vue and have the code in these files:

main.js:

import Vue from 'vue'
import App from './App.vue'

import API from '@aws-amplify/api'
import PubSub from '@aws-amplify/pubsub'
import awsconfig from './aws-exports'

import { AmplifyPlugin } from 'aws-amplify-vue'
import { Logger } from '@aws-amplify/core'
import { I18n } from '@aws-amplify/core'
import Auth from '@aws-amplify/auth'
import { AuthClass } from '@aws-amplify/auth'


import router from './router'
import VueRouter from 'vue-router'

Logger.LOG_LEVEL = 'DEBUG';
API.configure(awsconfig)
PubSub.configure(awsconfig)

Vue.use(VueRouter, AmplifyPlugin, { AuthClass, Auth, Logger, I18n })
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router/index.js:

import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Signout from '../views/Signout.vue'
  const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/',
    name: 'Sign Out',
    component: Signout
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue.js

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/signout">Sign Out</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

views/Home.vue:

<template>
  <div class="home">
    <amplify-authenticator></amplify-authenticator>
  </div>
</template>

<script>
// @ is an alias to /src
import { Logger } from 'aws-amplify';
import { components } from 'aws-amplify-vue'

const logger = new Logger('foo');

export default {
  name: 'Home',
  components: {
    ...components
  },
  created(){
    console.log('okoko');
    logger.info('info bar');
  }
  
}

</script>

Any help would be greatly appreciated!

[zeheeba]

@ot-dchristopher 's solution worked for me. Putting his string
"Vue.prototype.$Amplify = Amplify;" at the end of my main.js made the issue go away immediately, thank you sir!

[github-actions]

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.