CODEWITHSUNDEEP
node.jsmongodbmongoosenext.jsnext.js13
Avinash Sethu
Avinash Sethu

Reputation: 43

Import Mongoose lib in api directory in Next js 13.2 app directory gives error

In hello.js

import connectMongo from '../../../util/connectDB';
import UserModel from '../../../models/UserModel';
import { NextResponse } from 'next/server'

export async function GET(request) {
  return NextResponse.json({hello: 'Hello, Next.js!'})
}

export async function POST(request) {
  const data = await request.json();
  console.log(data);
  return NextResponse.json(data)
}

In util/connextDB

import mongoose from 'mongoose';

const connectMongo = () => {
    try {
        const conn = mongoose.connect(process.env.MONGODB_URI, {
        useNewUrlParser: true,
        useUnifiedTopology: true,
        useCreateIndex: true,
        });
    
        console.log(`MongoDB Connected: ${conn.connection.host}`);
    } catch (error) {
        console.error(`Error: ${error.message}`);
        process.exit(1);
    }
};

export default  connectMongo;

And the error shows

error - node_modules/mongoose/lib/types/objectid.js (21:31) @ prototype error - TypeError: Cannot read properties of undefined (reading 'prototype') at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/types/objectid.js:15:36) at Object.(sc_server)/./node_modules/mongoose/lib/types/objectid.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:2728:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:7:18) at Object.(sc_server)/./node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:451:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js:4:22) at Object.(sc_server)/./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:473:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/index.js:4:100) at Object.(sc_server)/./node_modules/mongoose/lib/index.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:2057:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/index.js:5:18) at Object.(sc_server)/./node_modules/mongoose/index.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:242:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./models/UserModel.js:5:66) at Module.(sc_server)/./models/UserModel.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:154:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./app/api/hello/route.js:6:75) at Module.(sc_server)/./app/api/hello/route.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:143:1) at webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fhello%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fhello%2Froute.js&appDir=%2FUsers%2Favinashsethu%2FDesktop%2FDevelopment%2Fekali-lms%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Favinashsethu%2FDesktop%2FDevelopment%2Fekali-lms&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=!:13:130) at Module.(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Fhello%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Fhello%2Froute.js&appDir=%2FUsers%2Favinashsethu%2FDesktop%2FDevelopment%2Fekali-lms%2Fapp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=%2FUsers%2Favinashsethu%2FDesktop%2FDevelopment%2Fekali-lms&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=! at /Users/avinashsethu/Desktop/Development/ekali-lms/node_modules/next/dist/server/load-components.js:49:73 at async Object.loadComponentsImpl [as loadComponents] (/Users/avinashsethu/Desktop/Development/ekali-lms/node_modules/next/dist/server/load-components.js:49:26) at async DevServer.findPageComponentsImpl (/Users/avinashsethu/Desktop/Development/ekali-lms/node_modules/next/dist/server/next-server.js:599:36) { page: '/api/hello' }

I need to connect the mongoDB to next js application then only i can able to build an application without this i cant able to create an application

Upvotes: 4

Views: 4135

Answers (4)

Azerum
Azerum

Reputation: 371

Other answers shown experimental features you can enable to avoid the error. In case you don't want to use experimental features yet, you can stick to [email protected] and wait until the features become stable

mongoose has bson as dependency. bson started using top-level await in version 5+ (source). mongoose started using bson 5+ in version 7+ (source). [email protected] is the latest 6.x.y version

Upvotes: 2

Mathieu Guyot
Mathieu Guyot

Reputation: 997

These are the things i've learned by spending time using mongoose 7 with latest nextjs version:

Make sure that mongoose is not imported inside client components ! (Which were creating Can't resolve errors that you are facing)

And if you are using mongoose 7, I have to put serverComponentsExternalPackages option in next.config.js (even with the fix given here https://github.com/vercel/next.js/issues/42277)

/** @type {import("next").NextConfig} */
module.exports = {
    experimental: { appDir: true, serverComponentsExternalPackages: ["mongoose"] },
    webpack(config) {
        config.experiments = { ...config.experiments, topLevelAwait: true };
        return config;
    }
};

I would also change your export by

const Product = mongoose.models && "Product" in mongoose.models ? mongoose.models. Product : mongoose.model("Product", PostSchema);
export default Product;

my project https://github.com/mathieuguyot/adventures have mongoose 7 integrated with next 13.2.4, maybe it can help you in any way :)

Upvotes: 12

Bogdan
Bogdan

Reputation: 21

Try to write in next.config.js file:

experimental: {
  appDir: true,
  serverComponentsExternalPackages: ["mongoose"],
},

Upvotes: 2

Michael
Michael

Reputation: 56

I am currently facing the same issue, after updating the mongoose dependencies to 7.0.1. Downgrading to mongoose "6.10.3" helped me to resolve the issue for the time being. I hope, this can help you as well!

Upvotes: 4

Related Questions