AWS расширяет возможности модульного импорта с помощью Vue

Это, вероятно, вопрос "JavaScript", не относящийся к Vue. Я пытаюсь импортировать определенные модули как псевдоним, но это не представляется возможным. Моя конкретная проблема показана ниже при попытке использовать модульный импорт с AWS Amplify и Vue. Вот "немодульная" версия, которая создает экземпляр Vue.

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)

Я сделал это:

import Amplify from '@aws-amplify/core'

Но я не могу понять, как передать подмножество модулей AmplifyModules в Vue. Я продолжаю получать эту ошибку:

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)

Похоже, что Vue ищет определенные модули, Auth, Logger и т. Д., Которые обычно предоставляются псевдонимом AmplifyModules, но который импортирует все модули из aws-ampify, который не является модульным.

Есть идеи?

Источник

2 ответа

Придумали это...

Я отладил проблему с передачей модулей и начал работать с Vue и модульным импортом. Для тех, кто заинтересован, я заменил "import * as AmplifyModules" на:

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

и используйте это так:

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

Надеюсь, это поможет кому-то

Источник

Я потратил несколько часов, чтобы найти ответ на этот вопрос, поэтому я расскажу, что сработало для меня.

Обратите внимание, что мне не нужно aws-amplify-vue в моем проекте, поэтому он может отличаться от того, что вам нужно.

В моем случае мне нужен был только Auth, поэтому в main.js у меня есть:

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

Я НЕ делаю import { AmplifyPlugin } from 'aws-amplify-vue'; Vue.use(AmplifyPlugin) поскольку мне это не нужно, мне нужно вручную подключить Amplify, выполнив: Vue.prototype.$Amplify = Amplify

Затем в своем компоненте я использую его как:

this.$Amplify.Auth.signOut()

Это сэкономило мне ~ 250 КБ в размере пакета.

Источник

Модульный импорт вещей в настоящее время непрост.

Над этим открыто и активно работают: https://github.com/aws-amplify/amplify-js/issues/3365

Источник

Спасибо, Клифф! Или вы можете настроить Amplify в main.js следующим образом:

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

Amplify.configure(awsExports);

И импортируйте модули, где вы их используете, так как вам не обязательно, чтобы они были доступны во всем мире. Например, у меня есть все мои функции авторизации в миксине, куда я импортирую этот модуль:

import { Auth } from 'aws-amplify';

export default {
  methods: {
    forgotPassword(email) {
      Auth.forgotPassword(email)
         .then(...
Источник
Другие вопросы по тегам