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

[paragopinath]

I'm trying to add Social login buttons to a custom login page

I've imported the signIn function as follow

import { getSession, signIn } from 'next-auth/client'

and then used the it on a custom button as follow

<button className="auto-signup auto-signup--fb" onClick={() => signIn('Facebook')}>
          {btnIcon('icon-btn__icon auto-signup__icon', '/icon-sprite.svg#icon-fb-sm')}
         <span className="auto-signup__label">Sign up with Facebook</span>
</button>

and when i click the button, i'm getting TypeError: Object(...) is not a function error. i'm using following versions of the packages
"react": "^16.13.0",
"react-dom": "^16.13.0",
"next": "^9.3.6",
"next-auth": "^2.2.0",

Can anyone let me know where the issue might be ? Thank you!

[iaincollins]

Hi there! I'm happy to have questions open, but please use the templates as requested and don't use the bug label for things that are not replicable bugs in NextAuth.js as it creates work for maintainers.

[bshawnd]

@paragopinath I was having the same issue this afternoon, I reviewied the dist/client.js file and saw that the correct case for the exports was signin and signout. Once I change my imports and the function called onClick, it worked. Hope this helps

[stale]

Hi there! It looks like this issue hasn't had any activity for a while. It will be closed if no further activity occurs. If you think your issue is still relevant, feel free to comment on it to keep ot open. Thanks!

[stale]

Hi there! It looks like this issue hasn't had any activity for a while. To keep things tidy, I am going to close this issue for now. If you think your issue is still relevant, just leave a comment and I will reopen it. (Read more at #912) Thanks!

[bcrave]

Hello, I'm having this problem. The error I'm getting is:
TypeError: next_auth_providers_google__WEBPACK_IMPORTED_MODULE_2__ is not a function

You can recreate it by installing the next-auth library, and setting it up according to the docs at https://next-auth.js.org/getting-started/example.

Note that it works when I clone the example repo, but when I try to implement it into my app, I get this error.

[adamduncan]

TypeError: next_auth_providers_google__WEBPACK_IMPORTED_MODULE_2__ is not a function

We're also getting this error on [email protected] and Node v16.15.1. @bcrave Did you track down a resolution on this one?

[bcrave]

I actually did. I just changed the versions of node and next-auth that I was using and it started to work. Thanks!

…

On Tue, Jun 28, 2022 at 18:38 Adam Duncan ***@***.***> wrote: TypeError: next_auth_providers_google__WEBPACK_IMPORTED_MODULE_2__ is not a function We're also getting this error on ***@***.*** and Node v16.15.1. @bcrave <https://github.com/bcrave> Did you track down a resolution on this one? — Reply to this email directly, view it on GitHub <#572 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AN64SGNYLHHXRC6E5EJMDETVRME75ANCNFSM4P4LD5NQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[adamduncan]

I actually did. I just changed the versions of node and next-auth that I was using and it started to work.

Good to hear, @bcrave. Which versions of Node/Next.js/next-auth worked for you in the end?

Edit: FWIW we found ourselves being able to resolve this by explicitly calling NextAuth.default(... and GoogleProvider.default(... — which makes us think this is a webpack v5/Next.js v12/React v17-18 versioning peculiarity. Any pointers on what that would be?

[vgeorge]

I got this error after adding "type": "module" to package.json, before that, it was working fine. I solved this by explicitly calling NextAuth.default(... as suggested. Versions: next-auth 4.16.4, Node.js 18.12.1. I hope it helps.

[sherrylia0hy]

Edit: FWIW we found ourselves being able to resolve this by explicitly calling NextAuth.default(... and GoogleProvider.default(... — which makes us think this is a webpack v5/Next.js v12/React v17-18 versioning peculiarity. Any pointers on what that would be?

I had same problem with next 13.1.1, next-auth 4.18.7, react 18.2.0. This comment saved my day. Thank you.

[blockspector]

Edit: FWIW we found ourselves being able to resolve this by explicitly calling NextAuth.default(... and GoogleProvider.default(... — which makes us think this is a webpack v5/Next.js v12/React v17-18 versioning peculiarity.

I also had the same issue I was following this guide "https://www.youtube.com/watch?v=A5ZN--P9vXM&list=PLNBstBbanNo-urO14JTnv7Jezq4XjOG_e&index=1&t=699s"

I am using the following versions.

"next": "13.2.3",
"next-auth": "^4.22.1"

I updated my file @ /pages/api/auth/[...nextauth].js
From

NextAuth({
GoogleProvider({

To

NextAuth.default({...
GoogleProvider.default({...

This solved my issue thank you! 🥹

[epicmau5time]

Hi, @blockspector or @adamduncan.

Could either of you provide a snippet of your solution? I have the same issue and am having a hard time replicating with typescript as ".default" does not seem to exist on providers.

next-auth: "next-auth": "^4.24.5"

[adamduncan]

@epicmau5time Here's where we landed (using [email protected] at the time) — bear in mind we were just using JS, so didn't encounter TS errors:

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export default NextAuth.default({
  providers: [
    GoogleProvider.default({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

[ekeneamah]

Thank you @adamduncan your solution just saved me
changed from
`import AzureADProvider from "next-auth/providers/azure-ad";

export default NextAuth({
debug: true,
providers: [
AzureADProvider({
clientId: process.env.NEXT_PUBLIC_CLIENT_ID,`

to

`import AzureADProvider from "next-auth/providers/azure-ad";

export default NextAuth.default({
debug: true,

providers: [  
  AzureADProvider.default({
  clientId: process.env.NEXT_PUBLIC_CLIENT_ID,`

as you said. Thank you so much