Cannot read properties of undefined (reading 'verifyMessage')

Question

I am using NextAuth(4.24.6) and SIWE(2.0.5) for authentication. when I try to verify the signature it gives error

'TypeError: Cannot read properties of undefined (reading 'verifyMessage')
    at eval (webpack-internal:///(rsc)/./node_modules/siwe/dist/client.js:292:43)
    at new Promise (<anonymous>)
    at SiweMessage.eval (webpack-internal:///(rsc)/./node_modules/siwe/dist/client.js:218:20)
    at Generator.next (<anonymous>)
    at eval (webpack-internal:///(rsc)/./node_modules/siwe/dist/client.js:59:71)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///(rsc)/./node_modules/siwe/dist/client.js:41:12)
    at SiweMessage.verify (webpack-internal:///(rsc)/./node_modules/siwe/dist/client.js:217:16)
    at Object.authorize (webpack-internal:///(rsc)/./app/api/auth/[...nextauth]/route.js:58:47)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.callback (webpack-internal:///(rsc)/./node_modules/next-auth/core/routes/callback.js:291:20)
    at async AuthHandler (webpack-internal:///(rsc)/./node_modules/next-auth/core/index.js:298:38)
    at async NextAuthRouteHandler (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:50:30)
    at async NextAuth._args$ (webpack-internal:///(rsc)/./node_modules/next-auth/next/index.js:85:24)
    at async C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:63809
    at async eU.execute (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:53964)
    at async eU.handle (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\compiled\next-server\app-route.runtime.dev.js:6:65062)
    at async doRender (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:1333:42)
    at async cacheEntry.responseCache.get.routeKind (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:1543:40)        
    at async DevServer.renderToResponseWithComponentsImpl (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:1463:28)  
    at async DevServer.renderPageComponent (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:1856:24)
    at async DevServer.renderToResponseImpl (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:1894:32)
    at async DevServer.pipeImpl (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:911:25)
    at async NextNodeServer.handleCatchallRenderRequest (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\next-server.js:271:17)     
    at async DevServer.handleRequestImpl (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\base-server.js:807:17)
    at async C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\dev\next-dev-server.js:331:20
    at async Span.traceAsyncFn (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\trace\trace.js:151:20)
    at async DevServer.handleRequest (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\dev\next-dev-server.js:328:24)
    at async invokeRender (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\lib\router-server.js:163:21)
    at async handleRequest (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\lib\router-server.js:342:24)
    at async requestHandlerImpl (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\lib\router-server.js:366:13)
    at async Server.requestListener (C:\Users\HP\evoting\evotingdapp\node_modules\next\dist\server\lib\start-server.js:140:13)'

I am using nextJS 14. My [...nextauth]/route.js code is,

import NextAuth from 'next-auth'
import CredentialsProvider from 'next-auth/providers/credentials'
import { getCsrfToken } from 'next-auth/react'
import { SiweMessage } from 'siwe'

const handler = NextAuth({
  secret: process.env.NEXTAUTH_SECRET,
  session: {
    strategy:'jwt'
  },
  providers: [
    CredentialsProvider({
      name: 'Credentials',
      id: 'credentials',
      credentials: {
        message: {
          label: "Message",
          type: "text",
          placeholder: "0x0",
        },
        signature: {
          label: "Signature",
          type: "text",
          placeholder: "0x0",
        },
      },
      async authorize(credentials, req) {
        try {
          if (!process.env.NEXTAUTH_URL) {
            throw 'NEXTAUTH_URL is not set'
          }
          // the siwe message follows a predictable format
          const siwe = new SiweMessage(JSON.parse(credentials?.message || '{}'))
          const nextAuthUrl = new URL(process.env.NEXTAUTH_URL)
          if (siwe.domain !== nextAuthUrl.host) {
            return null
          }
          // validate the nonce
          if (siwe.nonce !== (await getCsrfToken({ req: { headers: req.headers } }))) {
            return null
          }
            console.log('reached here')
            const result = await siwe.verify({
              signature
            })

            console.log('result: ', result)
  
            if (result.success) {
              return {
                id: siwe.address,
              }
            }
            return null
          } catch (e) {
            return null
          }
      },
    }),
  ],
  callbacks: {
    


    async session({ session, token }) {
        session.address = token.sub
        session.user.name = token.sub
        return session
    },
  },
})

export { handler as GET, handler as POST }

here it console.logs 'reached here' and console.logs error TypeError: Cannot read properties of undefined (reading 'verifyMessage'). And I call the SignIn() function through a connect button in homepage,

const Authenticate = async () => {
    try {
      const message = new SiweMessage({
        domain: window.location.host,
        address: address,
        statement: "Sign in with Ethereum to the app.",
        uri: window.location.origin,
        version: "1",
        chainId: chain?.id,
        nonce: await getCsrfToken(),
      })
      const signature = await signMessageAsync({
        message: message.prepareMessage(),
      })
      console.log('saved')
      const res = await signIn('credentials', {message: JSON.stringify(message), signature, redirect: false})
      console.log(res)
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(()=>{
    if(isConnected){
      console.log('connected...')
      Authenticate()
    }
  },[isConnected])

Could anyone help please....

Tried some debugging. but can't solve it. I think the problem is with the

const result = await siwe.verify({
              signature
            })

method.