Object(...) is not a function' in Amplify Authenticator in vue2

Question

I would like to use the AWS Amplify Authenticator in a js vue2 app. The manual that I used can be found here: https://github.com/aws-amplify/amplify-ui/tree/legacy/legacy/amplify-ui-vue#recommended-usage But I end up getting an Object(...) is not a function error.

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)

The page SignInPage.vue looks like this:

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

I tried both the example on the top of the page, as the bottom examples (migrated section), both ending up with the same error. Can anybody help me out?

Update 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

After a lot of tries the following seems to solve it, with the help of this page: https://docs.amplify.aws/lib/auth/getting-started/q/platform/js/#option-1-use-pre-built-ui-components

Steps I have taken:

• uninstall the all the aws-amplify packages
• (re-)add aws-amplify @aws-amplify/ui-components packages
• remove the @aws-amplify related imports from the SignIn page
• add the following to the 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>