Remix.js中Loader函数触发浏览器Buffer未定义报错求助

你遇到的问题核心是：Remix的路由文件会同时编译到服务器和客户端环境，而你在路由文件里直接导入了MongoDB相关依赖（ObjectId、unverifiedAccountsColleciton），这些依赖内部用到了Node.js独有的Buffer API——浏览器里根本没有这个API，所以客户端加载代码时直接抛出ReferenceError: Buffer is not defined。

虽说Loader函数本身是在服务器端运行的，但Remix会把整个路由文件的代码打包到客户端（用于页面hydration渲染），哪怕你的组件根本没用到这些MongoDB的东西，打包工具还是会把这些依赖塞进客户端bundle里，最终在浏览器里触发错误。你删掉Loader里的MongoDB查询代码后，相关依赖的引用逻辑没了，客户端打包时就不会包含这些Node.js专属代码，错误自然就消失了。

1. 把服务器专属代码放到.server后缀的文件里 #

Remix会自动识别文件名带.server的模块，只在服务器端编译，不会打包到客户端，这是最推荐的做法。

• 新建~/db/verify-account.server.ts，把MongoDB查询逻辑移进去：

import { ObjectId } from "mongodb";
import { unverifiedAccountsColleciton } from "./index";

export async function getUnverifiedAccount(id: string) {
  if (!id) return null;
  return unverifiedAccountsColleciton.findOne({
    _id: new ObjectId(id),
  });
}

• 路由文件里只导入这个服务器端函数，组件里别再导入MongoDB相关依赖：

import { LoaderFunctionArgs, json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { getUnverifiedAccount } from "~/db/verify-account.server";

interface JsonResponse {
  success: boolean;
  message: string;
}

export default function VerifyEmailPage() {
  const data = useLoaderData<JsonResponse | Awaited<ReturnType<typeof getUnverifiedAccount>>>();
  console.log(data);

  return <>Hello</>;
}

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const id = url.searchParams.get("id");

  if (!id) {
    return json<JsonResponse>({
      success: false,
      message: "Bad request",
    });
  }

  const u = await getUnverifiedAccount(id);
  if (!u) {
    return json<JsonResponse>({
      success: false,
      message: "Bad request",
    });
  }

  return json(u);
}

2. 在Loader里动态导入服务器端依赖 #

如果不想拆分文件，也可以在Loader内部动态导入MongoDB相关代码，这样客户端打包时就不会包含这些依赖：

export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const id = url.searchParams.get("id");

  if (!id) {
    return json<JsonResponse>({
      success: false,
      message: "Bad request",
    });
  }

  // 动态导入服务器专属依赖，客户端不会打包这些代码
  const { ObjectId } = await import("mongodb");
  const { unverifiedAccountsColleciton } = await import("~/db");
  
  const u = await unverifiedAccountsColleciton.findOne({
    _id: new ObjectId(id),
  });
  if (!u) {
    return json<JsonResponse>({
      success: false,
      message: "Bad request",
    });
  }

  return json(u);
}

记得把路由组件里的import { ObjectId } from "mongodb";删掉，别让客户端代码沾到这些依赖。

3. （不推荐）给浏览器补Buffer的Polyfill #

如果你确实非要在客户端用MongoDB相关代码，可以给浏览器补Buffer的支持，但这会增大客户端bundle体积，而且本来就没必要在客户端处理数据库逻辑，所以不推荐这么做：

• 先装包：npm install buffer
• 在app/root.tsx里加这段代码：

import { Buffer } from "buffer";
(window as any).Buffer = Buffer;

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