CodeNote.net

Using @nuxtjs/auth-next Instead of @nuxtjs/auth Due to 'export 'default' (imported as 'nanoid') was not found in 'nanoid'' Error

Tadashi Shigeoka ·  Thu, December 17, 2020

When using Auth0 with @nuxtjs/auth in Nuxt.js, I encountered the “export ‘default’ (imported as ‘nanoid’) was not found in ‘nanoid’” error, so I’ll share how I resolved it by switching to @nuxtjs/auth-next.

Nuxt.js

Background: Nuxt.js + TypeScript + Auth0

I tried to use @nuxtjs/auth to achieve Nuxt.js + TypeScript + Auth0, but encountered the “export ‘default’ (imported as ‘nanoid’) was not found in ‘nanoid’” error and couldn’t use it, so I switched from @nuxtjs/auth version 4.9.1 to @nuxtjs/auth-next version 5.0.0-1608568767.2fe2217.

package.json

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

Error Messages When Using @nuxtjs/auth

CLI Error During npm run dev

$ 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

Error in 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)

That’s all from the Gemba on resolving the @nuxtjs/auth error in Nuxt.js by switching to @nuxtjs/auth-next.

Reference Information