在Remix中使用oslo/password遭遇ViteJS .node文件加载错误

你遇到的问题是：即使仅在.server.ts文件中引入oslo/password，Vite仍然报错无法处理.node后缀的原生模块文件，错误来自@node-rs/argon2和@node-rs/bcrypt这两个oslo的依赖项。

解决步骤如下：

• 配置Vite排除原生模块的客户端预构建
  在vite.config.ts中添加optimizeDeps.exclude，让Vite不要在客户端打包流程中处理这些原生模块：

  import { vitePlugin as remix } from "@remix-run/dev";
  import { defineConfig } from "vite";
  
  export default defineConfig({
    plugins: [remix()],
    optimizeDeps: {
      exclude: ["@node-rs/argon2", "@node-rs/bcrypt"],
    },
  });
  

• 确认服务端代码的隔离性
  检查你的代码结构，确保oslo/password的所有导入和使用逻辑都只存在于.server.ts或服务端路由文件中，不要在客户端组件（无.server后缀的.tsx/.ts文件）中间接引入这些模块。

• 用Remix配置指定服务端依赖打包
  如果第一种方法无效，在remix.config.js中配置serverDependenciesToBundle，明确告知Remix这些模块仅在服务端打包：

  /** @type {import('@remix-run/dev').AppConfig} */
  export default {
    // 保留你的其他配置
    serverDependenciesToBundle: [
      /@node-rs\/argon2/,
      /@node-rs\/bcrypt/,
    ],
  };
  

原因说明 #

@node-rs/argon2和@node-rs/bcrypt是基于Rust编译的Node.js原生模块，Vite默认没有配置处理.node文件的加载器。虽然你只在服务端文件中使用，但Vite的依赖预构建机制会扫描项目中的所有依赖，尝试将其纳入客户端打包流程，从而触发这个错误。通过上述配置，可以把这些原生模块隔离到服务端打包流程中，避免Vite在客户端环境下处理它们。

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