@nuxtjs/auth で “export ‘default’ (imported as ‘nanoid’) was not found in ‘nanoid’ エラーになるので @nuxtjs/auth-next を使う

Nuxt.js にて @nuxtjs/auth で Auth0 を利用すると “export ‘default’ (imported as ‘nanoid’) was not found in ‘nanoid’ エラーが発生したので @nuxtjs/auth-next へ置き換えて解決した話をご紹介します。

Nuxt.js

背景 Nuxt.js + TypeScript + Auth0

Nuxt.js + TypeScript + Auth0 を実現するために @nuxtjs/auth を利用しようとしてましたが “export ‘default’ (imported as ‘nanoid’) was not found in ‘nanoid’ エラーが発生して利用できなかったので　@nuxtjs/auth version 4.9.1 から @nuxtjs/auth-next version 5.0.0-1608568767.2fe2217 へ置き換えました。

package.json

-    "@nuxtjs/auth": "^4.9.1",
+    "@nuxtjs/auth-next": "^5.0.0-1608568767.2fe2217",

@nuxtjs/auth 利用時のエラーメッセージ

npm run dev の CLI 上のエラー

$ npm run dev

WARN  Compiled with 1 warnings                                         friendly-errors 17:41:39
WARN  in ./.nuxt/auth/schemes/oauth2.js                                friendly-errors 17:41:39

"export 'default' (imported as 'nanoid') was not found in 'nanoid'     friendly-errors 17:41:39

Chrome DevTools Console 上のエラー

Uncaught (in promise) TypeError: Object(...) is not a function
    at Oauth2Scheme.login (webpack-internal:///./.nuxt/auth/schemes/oauth2.js:159)
    at Auth.login (webpack-internal:///./.nuxt/auth/auth.js:219)
    at eval (webpack-internal:///./.nuxt/auth/auth.js:206)

以上、Nuxt.js にて @nuxtjs/auth がエラーで利用できないので @nuxtjs/auth-next へ置き換えて解決した、現場からお送りしました。

参考情報

関連記事