CODEWITHSUNDEEP
javascriptvue.jsvuejs2aws-amplifyamplifyjs
Cliff Helsel
Cliff Helsel

Reputation: 940

AWS Amplify Modular Imports with Vue

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?

Upvotes: 6

Views: 2127

Answers (4)

alt146
alt146

Reputation: 526

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.

Upvotes: 4

cam8001
cam8001

Reputation: 1641

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

Upvotes: 0

gwvt
gwvt

Reputation: 125

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(...

Upvotes: -3

Cliff Helsel
Cliff Helsel

Reputation: 940

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

Upvotes: 10

Related Questions