Vue js - Cannot read property 'configure' of undefined

Describe the bug I’ve followed the instructions here:

https://docs.amplify.aws/start/q/integration/vue

My site works great locally with a development build, but as soon as i run a production build i get a blank site with Cannot read property 'configure' of undefined error in the console

To Reproduce Steps to reproduce the behavior:

Add amplify to an empty vue js component, with this in main.js:

import Amplify from 'aws-amplify';
import '@aws-amplify/ui-vue';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);

Run yarn serve - ✅ works as expected Run yarn build, and run the output with http-server or other - ❌ build succeeds, but site is blank, with this error in the console:

Cannot read property 'configure' of undefined

Expected behavior The site to render in both development and production builds

[sawyerh]

Looks like this may only be an issue when importing the default export:

import Amplify from "aws-amplify"; // 🛑

The issue seems to be resolved if you use the named export instead:

import { Amplify } from "aws-amplify"; // ✅

[siegerts]

I created a small POC with Vue v3 that failed with the above error. In my case, it looks like the errors may be related to the plugin not being updated for Vue 3.

At a top-level glance:

• https://v3.vuejs.org/guide/plugins.html#using-a-plugin
• https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-iscustomelement

After rolling back to Vue v2.6.11 (below), I was able to successfully test locally, and deploy (publish) without the error.

  "@aws-amplify/ui-vue": "^0.2.12",
  "aws-amplify": "^3.0.22",
  "aws-amplify-vue": "^2.1.2",
  "core-js": "^3.6.5",
  "vue": "^2.6.11"