在Next.js中使用Mongoose时出现模块缺失与关键依赖警告

这些警告都是MongoDB驱动的可选增强依赖缺失导致的——这些依赖用来提供压缩、特定认证、AWS集成等额外功能，你的项目根本用不上，不用安装，直接用以下方法消除警告：

方法一：把数据库操作移到服务器端执行（推荐） #

Next.js客户端编译会扫描所有导入模块，而Mongoose代码本来就该只在服务器端运行，把数据获取逻辑放到API路由或Server Component即可：

Pages Router 操作步骤 #

1. 创建pages/api/guns.js API路由：

import connect, { Gun } from "../../lib/mongo";

export default async function handler(req, res) {
  try {
    await connect();
    const data = await Gun.find({});
    res.status(200).json(data);
  } catch (e) {
    res.status(500).json({ error: "获取数据失败" });
  }
}

2. 修改页面组件，通过fetch调用API：

import Loading from "./loading";

export default async function Guns() {
  const res = await fetch("/api/guns");
  if (!res.ok) {
    return <div>error</div>;
  }
  const data = await res.json();
  return (
    <div>
      <Loading />
      guns
      {data.map((v, i) => (
        <div key={i}>{v.ammo}</div>
      ))}
    </div>
  );
}

App Router 操作步骤 #

如果用的是App Router，默认页面就是Server Component，直接保留现有代码即可（不要加'use client'指令），Mongoose代码只会在服务器端编译，不会触发客户端依赖扫描。

方法二：配置Webpack忽略可选依赖 #

在项目根目录的next.config.js里添加Webpack配置，直接跳过这些无用的可选依赖解析：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    // 忽略MongoDB的可选依赖
    config.resolve.fallback = {
      ...config.resolve.fallback,
      "aws-crt": false,
      "bson-ext": false,
      kerberos: false,
      "@mongodb-js/zstd": false,
      snappy: false,
      aws4: false,
      "mongodb-client-encryption": false,
    };

    // 关闭动态require的Critical dependency警告
    config.module.exprContextCritical = false;

    return config;
  },
};

module.exports = nextConfig;

方法三：动态导入数据库逻辑 #

如果必须在页面组件里直接导入Mongoose相关代码，用Next.js的动态导入指定仅在服务器端加载：

1. 把getData函数抽成单独文件lib/getData.js：

import connect, { Gun } from "./mongo";

export default async function getData() {
  try {
    await connect();
    const r = await Gun.find({});
    return r;
  } catch (e) {
    return false;
  }
}

2. 修改页面组件：

import Loading from "./loading";
import dynamic from "next/dynamic";

// 仅在服务器端加载数据获取逻辑
const getData = dynamic(() => import("../../lib/getData"), { ssr: true });

export default async function Guns() {
  const data = await getData();
  if (!data) {
    return <div>error</div>;
  }
  return (
    <div>
      <Loading />
      guns
      {data.map((v, i) => (
        <div key={i}>{v.ammo}</div>
      ))}
    </div>
  );
}

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