'Object(...) is not a function' 在 vue2 中的放大身份验证器

Question

我想在js ve2应用程序中使用AWS Amplify Authenticator。我使用的手册可以在这里找到:https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue#recommended-usage但是我最终得到一个Object(...) is not a function错误。

TypeError: Object(...) is not a function
at Module.eval (index.js?2bbc:22:1)
at eval (index.js:12544:30)
at Module../node_modules/@aws-amplify/ui-vue/dist/index.js (sign-in.js:167:1)
at __webpack_require__ (app.js:859:30)
at fn (app.js:151:20)
at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/SignInPage.vue?vue&type=script&lang=js&:2:77)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/pages/auth/SignInPage.vue?vue&type=script&lang=js& (sign-in.js:179:1)
at __webpack_require__ (app.js:859:30)
at fn (app.js:151:20)
at eval (SignInPage.vue?0642:1:1)

页面SignInPage.vue看起来像这样:

<template>
<div>
<amplify-authenticator />
</div>
</template>
<script>
import '@aws-amplify/ui-vue'
import { onAuthUIStateChange } from '@aws-amplify/ui-components'
export default {
name: 'SignInPage',
created() {
this.unsubscribeAuth = onAuthUIStateChange((authState, authData) => {
this.authState = authState
this.user = authData
})
},
data() {
return {
user: undefined,
authState: undefined,
unsubscribeAuth: undefined,
}
},
beforeDestroy() {
this.unsubscribeAuth()
},
}
</script>

我尝试了页面顶部的两个例子，作为底部的例子(迁移部分)，两者都以相同的错误结束。有人能帮我一下吗?

更新1:

SignInPage.vue

<template>
<div>
<authenticator />
</div>
</template>
<script>
import { Authenticator } from '@aws-amplify/ui-vue'
import '@aws-amplify/ui-vue/styles.css'
export default {
name: 'SignInPage',
components: { Authenticator },
}
</script>

package.json

"dependencies": {
"@apollo/client": "^3.3.9",
"@aws-amplify/ui-vue": "^2.3.11",
"@vue/apollo-composable": "^4.0.0-alpha.12",
"@vue/composition-api": "^1.0.0-rc.2",
"aws-amplify": "^4.3.20",
"aws-appsync": "^4.0.3",
"vue": "^2.6.11",
}

Answer 1

经过多次尝试，下面的方法似乎解决了这个问题，在这个页面的帮助下:https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components

我已经采取的步骤:

• 卸载所有的aws-amplify包
• (重新)添加aws-amplify @aws-amplify/ui-components packages
• 从SignIn页面删除@aws-amplify相关的导入
• 将以下内容添加到main.js

import { applyPolyfills, defineCustomElements } from '@aws-amplify/ui-components/loader';

applyPolyfills().then(() => {
defineCustomElements(window);
});

Vue.config.ignoredElements = [/amplify-w*/];

SignInPage.vue

<template>
<div>
<amplify-authenticator />
</div>
</template>

<script>
export default {
name: 'SignInPage',
}
</script>