javascript - AWS Amplify Modular Imports with Vue - Stack Overflow

admin管理员组

文章数量:1349221

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-vuemon.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-vuemon.js?19b2:6805)
at _next (aws-amplify-vuemon.js?19b2:6827)
at eval (aws-amplify-vuemon.js?19b2:6834)
at new Promise ()
at VueComponent.eval (aws-amplify-vuemon.js?19b2:6823)
at VueComponent.mounted (aws-amplify-vuemon.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?

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.mon.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.mon.js?19b2:6805)
at _next (aws-amplify-vue.mon.js?19b2:6827)
at eval (aws-amplify-vue.mon.js?19b2:6834)
at new Promise ()
at VueComponent.eval (aws-amplify-vue.mon.js?19b2:6823)
at VueComponent.mounted (aws-amplify-vue.mon.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?

• javascript
• vue.js
• vuejs2
• aws-amplify
• amplifyjs

Share Improve this question Follow asked Dec 25, 2018 at 19:42 Cliff HelselCliff Helsel 94022 gold badges1313 silver badges2626 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 10

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

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 ponent I use it as:

this.$Amplify.Auth.signOut()

This saved me ~ 250KB in bundle size.

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

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

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

本文标签： javascriptAWS Amplify Modular Imports with VueStack Overflow