amplify-js: 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

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 19 (3 by maintainers)

Most upvoted comments

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"; // ✅

sawyerh on Jul 29, 2020

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:

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"

siegerts on Aug 5, 2020

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"

For me, this was the issue. I didn’t realize that I was using the Vue 3 Release Candidate/Preview. Commenting out the import allows the app to compile and run, though I’m sure I’ll have to use Vue 2.X in the meantime. Or I I’ll just use the Auth API manually with my own UI.

Hopefully the plugin can be updated soon.

chrisleyva on Sep 4, 2020

@inklingsofreality have you tried on a v2.x version of Vue instead of Vue 3? #6411 (comment)

I had tried it, but ran into other issues. I’ll try again and see if that solves it.

inklingsofreality on Sep 1, 2020

Adding a note that I ran into this using aws-amplify@3.0.22 and aws-amplify-react@4.1.21 so this isn’t exclusive to Vue.

sawyerh on Jul 29, 2020

Hi All, i have the same issue. since i use vue-cli generated project i don’t know how to change the webpack version. any idea how to fix this?

dwips on Jul 27, 2020