[SOLVED] Gridsome + AWS Amplify - Importing Event Bus breaks Logout Button Component

Gridsome + AWS Amplify - Importing Event Bus breaks Logout Button Component

I have successfully integrated AWS Amplify's Auth UI functionality and components with Gridsome for simple login/logout functionality but when I try to access the the Amplify Event Bus with

import { AmplifyEventBus } from "aws-amplify-vue"

I get the error:

Error in mounted hook (Promise/async): "TypeError: Cannot read property 'Logger' of undefined"

I have found a similar issue on the github post and adding the suggested

Vue.prototype.$Amplify = Amplify;

does remove the warning but the Auth UI Logout component will no longer show up. I can Login but the Logout button does not show up. I do not understand why accessing the event bus would necessitate me adding Amplify to the Vue prototype when the UI components are already working without it AND why even if I do add it the components still do not appear.

Solution

The AmplifyEventBus has been discontinued, so is now considered Legacy

Instead, use Hub.listen, like this:

<script>
import { Hub } from 'aws-amplify'

export default {
  mounted() {
    Hub.listen('auth', (info) => {
      console.log('auth event:', info)
    })
  },
}
</script>

Logger can also be imported in the same way, like:

import { Hub, Logger } from 'aws-amplify'