【Nuxt.js】Google認証で、$auth.loginWith() が働いてくれない

Nuxt.js上で、Google認証を用いてのログイン機能を実装したい。

そんな最中、ある警告文と、エラー文が出て、認証できない事案に遭遇した。

WARNING

./.nuxt/auth/schemes/oauth2.js 
"export 'default' (imported as 'nanoid') was not found in 'nanoid'

ERROR

TypeError: Object(...) is not a function

現状のファイルたち

設定ファイル

nuxt.config.js

  buildModules: [
    '@nuxtjs/vuetify'
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
  ],
// 省略 
  auth: {
    redirect: {
      login: '/sessions/new',
      logout: '/',
      callback: '/callback',
      home: '/home',
    },
    strategies: {
      google: {
        client_id: ''
      }
    }
  },

Vueファイル

login.vue

<template>
  <v-row justify="center">
    <v-col cols="12" sm="10" md="8" lg="6">
      <v-card>
        <v-card-actions>
          <v-btn color="primary" raised @click="googleAuthenticate">Googleでログイン</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  // 省略
  methods: {
    googleAuthenticate () {
      this.$auth.loginWith("google")
    },
  }
}
</script>

解決法

同じような現象が起きている人がいたので、そちらを参考にすると、どうやらアプリが再構築されるたびにファイル内のnanoidのインポートを変更しなければならないというバグのようなので、nanoidをインストールすると解消されるようです。

バグを修正

npm i nanoid@2.1.11

意外と自分だけじゃなくて、ライブラリのバグが原因の時もあるようなので、
考えを巡らせるだけじゃなくて、調べることに徹することも大事ですね。
これにて、解決！