TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect is not a function

[Anonymous7code]

Prerequisites

• I have written a descriptive issue title

Mongoose version

8.0.4

Node.js version

20.9.0

MongoDB version

6.3.0

Operating system

None

Operating system version (i.e. 20.04, 11.3, 10)

11

Issue

While connecting to MongoDB it throws this error

TypeError: mongoose__WEBPACK_IMPORTED_MODULE_0___default(...).connect is not a function

and the code that throws this error is below while calling connectToDatabase() in other file

import mongoose from "mongoose";

const MONGODB_URI = process.env.NEXT_PUBLIC_MONGODB_URI;
if (!MONGODB_URI) {
  throw new Error(
    "Please define the MONGODB_URI environment variable inside .env"
  );
}

let cached = (global as any).mongoose || { conn: null, promise: null };

export const connectToDatabase = async () => {
  if (cached.conn) return cached.conn;

  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
      dbName: "festifusion",
    };

    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
};

I've cleared the cache, reinstalled all node packages still the problem prevail. Kindly look into this. Also saw a similar thread at #14183 but its a temp solution.

[vkarpov15]

What does your Webpack config look like? Are you using Next.js? We'll need a more complete repro to figure this out, because this is a Webpack error and your code looks like it is from Next.js' samples repo.

[Anonymous7code]

I'm using NextJS 14 trying to connect to MongoDB via mongoose below is the connection code

import mongoose from "mongoose";

const MONGODB_URI = process.env.NEXT_PUBLIC_MONGODB_URI;
if (!MONGODB_URI) {
  throw new Error(
    "Please define the MONGODB_URI environment variable inside .env"
  );
}

let cached = (global as any).mongoose || { conn: null, promise: null };

export const connectToDatabase = async () => {
  if (cached.conn) return cached.conn;
  
  if (!cached.promise) {
    const opts = {
      bufferCommands: false,
      dbName: "festifusion",
    };

    cached.promise = mongoose.connect(MONGODB_URI, opts).then((mongoose) => {
      return mongoose;
    });
  }
  cached.conn = await cached.promise;
  return cached.conn;
};

and the next.config.js file looks like it compiles well but the issue is still there

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    return config;
  },
  images: {
    domains: ["utfs.io"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: "utfs.io",
        port: "",
      },
    ],
  },
};

module.exports = nextConfig;

if I use

webpack: (config) => {
  config.experiments = {
    topLevelAwait: true
  };
  return config;
},

then it takes indefinite time to compile the code. I also took a reference from Mongoose Documentation on using with NextJs but still the issue is there I've attached log file for reference purpose. Let me know if you require more details.
localhost-1705844188011.log

[vkarpov15]

Did you add the following to your Next.js config?

const nextConfig = {
  experimental: {
    esmExternals: "loose", // <-- add this
    serverComponentsExternalPackages: ["mongoose"] // <-- and this
  }
// ...

[Anonymous7code]

Yes by adding this also the issue is not solved the whole connection.tsx code has been mentioned above and by adding toplevelawait to true in webpack config it takes infinite amount of time to compile.

[pskd73]

Any update here? I am also stuck with same issue. I have added experimental tags in next config, moved the connect statement inside a function. Nothing works.

    "mongoose": "^7.4.2",
    "next": "14.1.0",

Help would be great!

[vkarpov15]

We're unable to repro, this GitHub repo demonstrates that Mongoose works fine with Next.js 14. Please fork and modify this repo to demonstrate the issue you're seeing.

[github-actions]

This issue is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 5 days

[skylie628]

in my case, because mongoose does not currently support Next Edge Runtime, so just remove line export const runtime = "edge" and everything work well

[Anonymous7code]

I now works by adding

const nextConfig = {
webpack: (config) => {
    return config;
  },
experimental: {
    esmExternals: "loose", // <-- add this
   serverComponentsExternalPackages: ["mongoose"] 
}
}

just cleared the cache and deleted package-lock.json and node_modules not with the same code it works!! Thanks for help :)

[navkuun]

Hey @Anonymous7code I'm currently getting the same issue with connecting to Mongo, I added the config and it still doesn't work.

Could you also show what part of the code you've changed?

[Ubartaula]

experimental: {
esmExternals: "loose", // <-- add this
serverComponentsExternalPackages: ["mongoose"] // <-- and this
}

you don't even have to do above, it is totally fine with mongoose and Next 14 , this error is happening just because they are forgetting to mark their server action component with "use server" on top. JUST make sure to write "use server" for server actions that you created, thats it.

[Ubartaula]

just mark "use server" in all your server actions , that's all you need to do.