前提

AWS Amplifyでamplify add authした後に、Auth.signUp呼んだらエラー起きた場合。

エラー内容

ConsoleLogger.js?36de:84 [ERROR] 59:18.392 AuthError - 
            Error: Amplify has not been configured correctly.
            This error is typically caused by one of the following scenarios:

            1. Make sure you're passing the awsconfig object to Amplify.configure() in your app's entry point
                See https://aws-amplify.github.io/docs/js/authentication#configure-your-app for more information
            
            2. There might be multiple conflicting versions of aws-amplify or amplify packages in your node_modules.
                Try deleting your node_modules folder and reinstalling the dependencies with `yarn install`
        
ConsoleLogger._log @ ConsoleLogger.js?36de:84
ConsoleLogger.error @ ConsoleLogger.js?36de:150
AuthError @ Errors.js?13ca:41
NoUserPoolError @ Errors.js?13ca:50
AuthClass.rejectNoUserPool @ Auth.js?bf82:1795
AuthClass.signUp @ Auth.js?bf82:202
onclick1 @ App.vue?234e:21
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1854
invoker @ vue.runtime.esm.js?2b0e:2179
original._wrapper @ vue.runtime.esm.js?2b0e:6917

Errors.js?13ca:34 Uncaught (in promise) NoUserPoolError: Authentication Error
    at NoUserPoolError.AuthError [as constructor] (webpack-internal:///./node_modules/@aws-amplify/auth/lib-esm/Errors.js:39:24)
    at new NoUserPoolError (webpack-internal:///./node_modules/@aws-amplify/auth/lib-esm/Errors.js:55:28)
    at AuthClass.rejectNoUserPool (webpack-internal:///./node_modules/@aws-amplify/auth/lib-esm/Auth.js:1806:31)
    at AuthClass.signUp (webpack-internal:///./node_modules/@aws-amplify/auth/lib-esm/Auth.js:213:25)
    at VueComponent.onclick1 (webpack-internal:///./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/App.vue?vue&type=script&lang=js&:22:56)
    at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)
    at HTMLButtonElement.invoker (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2178:14)
    at HTMLButtonElement.original._wrapper (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6907:25)

原因と対処

エラーメッセージが親切で、書いてあるURL
https://aws-amplify.github.io/docs/js/authentication#configure-your-app
を開いてみると、main.jsに下記を追加しろって書いてありました。


import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

自分のアプリの場合、この未使用変数はエラーでダメだったので、Authを削除して、


import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

で無事通りました。
修正後のmain.jsの全体像は下記の通りです。


import Vue from 'vue'
import App from './App.vue'
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

補足

FRAMEWORK SUPPORT(Vue)のところに詳しく書いてありますね。
https://aws-amplify.github.io/docs/js/vue