AWS Amplify Modular Imports with Vue

Question

This is probably a "JavaScript" question not specific to Vue. I'm trying to import specific modules as an alias but that doesn't appear to be possible. My specific problem is shown below trying to use modular imports with AWS Amplify and Vue. Here is the "non-modular" version that creates the Vue instance.

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 I can't figure out how to pass a subset of AmplifyModules to Vue. I 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)

It looks like Vue is looking for specific modules, Auth, Logger, etc. which are normally provided by the AmplifyModules alias but that imports all modules from aws-amplify which is not modular.

Any ideas?

Longhair

Answer 1

Came up with this...

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

Longhair

Did not solve the issue in my setup. Vue 2.6.6, aws-amplify 1.1.19, aws-amplify-vue 0.2.5 – Fluoroscope

It did not work for me initially as I was using [] instead of {} on the Vue.use statement. – Larrabee

Answer 2

I spent a few hours to find answer to this, so I'm going to share what worked for me.

Note that I don't need aws-amplify-vue in my project, so it might be different with what you need.

In my case I only needed Auth, so in main.js I have:

import Amplify from '@aws-amplify/core'
import Auth from '@aws-amplify/auth' // eslint-disable-line no-unused-vars

Amplify.configure(awsconfig)

Vue.prototype.$Amplify = Amplify // <- This line is important

I'm NOT doing import { AmplifyPlugin } from 'aws-amplify-vue'; Vue.use(AmplifyPlugin) as I don't need it, so I have to manually attach Amplify by doing: Vue.prototype.$Amplify = Amplify

Then in my component I use it as:

this.$Amplify.Auth.signOut()

This saved me ~ 250KB in bundle size.

Fordo

Answer 3

Importing things in a modular way is not easy at present.

This is openly and actively being worked on: https://github.com/aws-amplify/amplify-js/issues/3365

Lanalanae

Answer 4

Thank you, Cliff! Or you could configure Amplify in main.js like this:

import Amplify from 'aws-amplify';
import awsExports from '@/aws-exports';

Amplify.configure(awsExports);

And import the modules where you use them, since you don't necessarily need them available globally. For example, I have all my auth functions in a mixin where I import that module:

import { Auth } from 'aws-amplify';

export default {
  methods: {
    forgotPassword(email) {
      Auth.forgotPassword(email)
         .then(...

Tonsillitis

This answer does not relate to the question. Obviously the question is about an aws-amplify-vue, and this answer does not relate to aws-amplify-vue. – Fluoroscope