在Next.js App目录使用Axios发送POST请求时遇TypeError错误

问题场景 #

在Next.js 13+ App Router目录结构下，前端通过Axios发送注册请求到/api/register接口时，后端抛出TypeError错误。

前端请求代码 #

const submitHandler = async (e) => {
  e.preventDefault();
  try {
    const {data} = await axios.post('/api/register', {
      name, 
      email, 
      password,
    });
    console.log(data);
  } catch (error) {
    console.log(error);
  }
};

报错信息（翻译后） #

error - Error [TypeError]: 无法读取未定义的属性（读取 'prototype'）
    at eval (webpack-internal:///(sc_server)/./node_modules/mongoose/lib/types/objectid.js:15:36)
    at (sc_server)/./node_modules/mongoose/lib/types/objectid.js (/Users/yakovtzur/Documents/Coding/Development/next_13_authjs/.next/server/app/api/register/route.js:2870:1)
    at __webpack_require__ (/Users/yakovtzur/Documents/Coding/Development/next_13_authjs/.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)

问题根源 #

该错误由Next.js App Router的服务器端打包逻辑与Mongoose部分模块不兼容导致，常见原因包括Mongoose版本与Next.js不匹配，或API路由中数据库连接初始化方式有误。

解决步骤 #

1. 升级Mongoose版本 #

确保使用支持Next.js 13+ App Router的Mongoose版本，推荐7.x及以上：

npm install mongoose@latest

2. 正确初始化数据库连接 #

在API路由中使用单例模式连接MongoDB，避免重复初始化：

// lib/mongoose.js
import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('请在环境变量中配置MONGODB_URI');
}

let cached = global.mongoose;

if (!cached) {
  cached = global.mongoose = { conn: null, promise: null };
}

async function dbConnect() {
  if (cached.conn) {
    return cached.conn;
  }

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

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

  cached.conn = await cached.promise;
  return cached.conn;
}

export default dbConnect;

在API路由中引入并使用：

// app/api/register/route.js
import dbConnect from '@/lib/mongoose';
import User from '@/models/User';
import { NextResponse } from 'next/server';

export async function POST(request) {
  await dbConnect();
  const { name, email, password } = await request.json();

  // 创建用户逻辑
  const user = await User.create({ name, email, password });
  return NextResponse.json({ user });
}

3. 配置Webpack排除Mongoose #

若升级后问题仍存在，在next.config.js中添加Webpack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.externals.push({
      'mongoose': 'commonjs mongoose',
    });
    return config;
  },
};

module.exports = nextConfig;

内容的提问来源于stack exchange，提问作者zok46