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?

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

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.