在 Next js 13.2 应用程序目录中的 api 目录中导入 Mongoose lib 会出现错误

Question

在 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)
}

在 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;

并且错误显示

错误 - node_modules/mongoose/lib/types/objectid.js (21:31) @ 原型错误 - TypeError: 无法在 eval (webpack-internal:///(sc_server)/ 处读取未定义的属性（读取“原型”）。 /node_modules/mongoose/lib/types/objectid.js:15:36) 在对象。(sc_server)/./node_modules/mongoose/lib/types/objectid.js (/Users/avinashsethu/Desktop/Development/ekali-lms /.next/server/app/api/hello/route.js:2728:1) 在webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43 ）在 eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/drivers/node-mongodb-native/collection.js:7:18) 在 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) 在webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) 在 eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib /drivers/node-mongodb-native/index.js:4:22) 在对象。(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) 在webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime .js:33:43) 在 eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/index.js:4:100) 在 Object.(sc_server)/./node_modules/mongoose/ lib/index.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:2057:1) 位于webpack_require (/Users/avinashsethu/Desktop/Development/ ekali-lms/.next/server/webpack-runtime.js:33:43) 在 eval (webpack-internal:///(sc_server)/./node_modules/mongoose/index.js:5:18) 在对象处。 (sc_server)/./node_modules/mongoose/index.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:242:1) 在webpack_require (/ Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) 在 eval (webpack-internal:///(sc_server)/./models/UserModel.js:5 ：66）在模块。（sc_server）/./models/UserModel.js（/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/api/hello/route.js:154:1）在webpack_require (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) 在 eval (webpack-internal:///(sc_server)/./app/api /hello/route.js:6:75) 在模块.(sc_server)/./app/api/hello/route.js (/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/app/ api/hello/route.js:143:1) 在webpack_require(/Users/avinashsethu/Desktop/Development/ekali-lms/.next/server/webpack-runtime.js:33:43) 在 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）在模块。（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=！在 /Users/avinashsethu/Desktop/Development/ekali-lms/node_modules/next/dist/server/load-components.js:49:73 在 async Object.loadComponentsImpl [作为 loadComponents] (/Users/avinashsethu/Desktop/Development/ ekali-lms/node_modules/next/dist/server/load-components.js:49:26) 在异步 DevServer.findPageComponentsImpl (/Users/avinashsethu/Desktop/Development/ekali-lms/node_modules/next/dist/server/next -server.js:599:36) { 页面: '/api/hello' }

我需要将 mongoDB 连接到下一个 js 应用程序，然后只有我才能构建应用程序，没有这个我无法创建应用程序

Answer 1

这些是我通过花时间使用 mongoose 7 和最新的 nextjs 版本学到的东西：

确保 mongoose 没有导入到客户端组件中！（这正在创建无法解决您面临的错误）

如果您使用的是 mongoose 7，我必须将 serverComponentsExternalPackages 选项放在 next.config.js 中（即使这里给出了修复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;
    }
};

我也会改变你的出口

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

我的项目https://github.com/mathieuguyot/adventures将 mongoose 7 与 next 13.2.4 集成，也许它可以以任何方式帮助你:)