NextJS 13集成Mongoose 7遇模块导入错误，求解决方案

核心问题原因 #

你遇到的kerberos、@mongodb-js/zstd、aws4缺失错误，本质是客户端组件（带'use client'）里直接导入了Mongoose/数据库连接代码。这些模块是MongoDB驱动的可选服务端依赖，客户端环境不会默认安装，而且Next.js严格禁止在客户端组件中使用服务端专属的数据库库。

解决步骤 #

1. 彻底隔离服务端与客户端的数据库操作

• 所有涉及Mongoose的代码（包括dbConnect.js）只能在服务端组件/Route Handler/API路由中使用，绝对不能在标记了'use client'的组件里导入。
• 如果客户端组件需要数据库数据，通过以下方式获取：
  • 在父级服务端组件中查询数据，再通过props传递给客户端组件
  • 客户端组件通过fetch调用自己的Route Handler（app目录下的route.js）来获取数据

2. 修正next.config.js配置

在现有配置基础上，添加webpack的fallback配置处理MongoDB的可选依赖，同时确保Mongoose正确外部化：

/** @type {import('next').NextConfig} */
module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    });
    // 处理MongoDB可选依赖的fallback，避免打包报错
    config.resolve.fallback = {
      ...config.resolve.fallback,
      kerberos: false,
      '@mongodb-js/zstd': false,
      aws4: false,
      'mongodb-client-encryption': false,
      snappy: false,
    };
    config.experiments = { ...config.experiments, topLevelAwait: true };
    return config;
  },
  experimental: {
    serverComponentsExternalPackages: ["mongoose"],
    appDir: true
  },
}

3. 确保dbConnect.js只在服务端运行

示例dbConnect.js（不要添加'use client'）：

import mongoose from 'mongoose';

const MONGODB_URI = process.env.MONGODB_URI;

if (!MONGODB_URI) {
  throw new Error('Please define the MONGODB_URI environment variable inside .env.local');
}

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

  try {
    cached.conn = await cached.promise;
  } catch (e) {
    cached.promise = null;
    throw e;
  }

  return cached.conn;
}

export default dbConnect;

4. 客户端组件获取数据示例

比如在服务端组件中查询数据，再传递给客户端子组件：

// app/posts/[postId]/page.js - 服务端组件，无需'use client'
import dbConnect from '@/lib/dbConnect';
import Post from '@/models/Post';
import PostClientComponent from './PostClientComponent';

export default async function PostPage({ params }) {
  await dbConnect();
  const post = await Post.findById(params.postId);

  return <PostClientComponent post={post} />;
}

// app/posts/[postId]/PostClientComponent.js - 客户端组件，带'use client'
'use client';

export default function PostClientComponent({ post }) {
  // 这里可以使用post数据进行客户端交互，比如点赞、评论等
  return (
    <div>
      <h1>{post.title}</h1>
      <div>{post.content}</div>
    </div>
  );
}

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