I am working on a Next.js< next auth and mongodb. I'm struggling with this error and don't know how to fix it. For next auth I use this document /getting-started/adapters/mongodb?_gl=1*v0nsy7*_gcl_au*ODcwNzM1MzgyLjE3MzI4ODMwNTUuNzIwMzA0MDc3LjE3MzI4ODc2NzIuMTczMjg4OTgwNw..

My error

TypeError: Cannot redefine property: __import_unsupported
    at Function.defineProperty (<anonymous>)
    at enhanceGlobals (webpack-internal:///(api)/./node_modules/next/dist/server/web/globals.js:97:12)
    at eval (webpack-internal:///(api)/./node_modules/next/dist/server/web/globals.js:105:1)
    at (api)/./node_modules/next/dist/server/web/globals.js (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\vendor-chunks\next.js:917:1)
    at __webpack_require__ (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\webpack-api-runtime.js:33:42)
    at eval (webpack-internal:///(api)/./node_modules/next/dist/server/web/adapter.js:30:18)
    at (api)/./node_modules/next/dist/server/web/adapter.js (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\vendor-chunks\next.js:884:1)
    at __webpack_require__ (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\webpack-api-runtime.js:33:42)
    at eval (webpack-internal:///(api)/./pages/api/auth/[...nextauth].js:12:86)
    at __webpack_require__.a (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\webpack-api-runtime.js:97:13)
    at eval (webpack-internal:///(api)/./pages/api/auth/[...nextauth].js:1:21)
    at (api)/./pages/api/auth/[...nextauth].js (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\pages\api\auth\[...nextauth].js:122:1)
    at __webpack_require__ (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\webpack-api-runtime.js:33:42)
    at eval (webpack-internal:///(api)/./node_modules/next/dist/build/webpack/loaders/next-route-loader/index.js?kind=PAGES_API&page=%2Fapi%2Fauth%2F%5B...nextauth%5D&preferredRegion=&absolutePagePath=.%2Fpages%5Capi%5Cauth%5C%5B...nextauth%5D.js&middlewareConfigBase64=e30%3D!:12:85)
    at __webpack_require__.a (file://C:\Users\Do Thi Hang Ha\OneDrive\Desktop\website\React\ecommerce with db\database\.next\server\webpack-api-runtime.js:97:13)

my db.js

// This approach is taken from .js/tree/canary/examples/with-mongodb
import { MongoClient, ServerApiVersion } from "mongodb"
 
if (!process.env.MONGODB_URI) {
  throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
}
 
const uri = process.env.MONGODB_URI
const options = {
  serverApi: {
    version: ServerApiVersion.v1,
    strict: true,
    deprecationErrors: true,
  },
}
 
let client;
 
if (process.env.NODE_ENV === "development") {
  // In development mode, use a global variable so that the value
  // is preserved across module reloads caused by HMR (Hot Module Replacement).
  let globalWithMongo = global;
 
  if (!globalWithMongo._mongoClient) {
    globalWithMongo._mongoClient = new MongoClient(uri, options)
  }
  client = globalWithMongo._mongoClient
} else {
  // In production mode, it's best to not use a global variable.
  client = new MongoClient(uri, options)
}
 
// Export a module-scoped MongoClient. By doing this in a
// separate module, the client can be shared across functions.
export default client

my [.../nextauth.js]

import client from '@/lib/db';
import { MongoDBAdapter } from '@auth/mongodb-adapter';
import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';
import { adapter } from 'next/dist/server/web/adapter';


export default NextAuth({
  adapter: MongoDBAdapter(client),
  providers: [
    // OAuth authentication providers...
    GoogleProvider({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET
    }),
  ]
  
})