Remix应用在Netlify中使用process.env时出现process未定义错误

核心原因 #

浏览器环境不存在Node.js的process对象，直接在前端代码中使用process.env.XXX会触发该错误。Remix与Netlify对客户端可访问的环境变量有特定命名规则和处理逻辑。

解决方案 #

• 重命名客户端环境变量
  将需要在前端代码中访问的变量前缀改为REMIX_PUBLIC_，比如把API_KEY改为REMIX_PUBLIC_API_KEY。Remix会自动将这类变量注入客户端环境，你可以在代码中通过process.env.REMIX_PUBLIC_API_KEY访问（Remix v2+推荐使用import.meta.env.REMIX_PUBLIC_API_KEY）。

• 配置本地.env文件
  在项目根目录的.env文件中添加修改后的变量：

  REMIX_PUBLIC_API_KEY=你的实际密钥内容
  

  注意：后端专属的敏感变量（如数据库密钥）不要加该前缀，仅在服务器端代码中使用即可。

• 同步Netlify后台配置
  登录Netlify后台进入你的应用，在Site settings > Environment variables中添加对应REMIX_PUBLIC_开头的变量，值与本地.env保持一致。

• 验证变量加载
  运行netlify dev时，可在服务器端的loader/action函数中打印变量确认是否加载成功：

  export async function loader() {
    console.log(process.env.REMIX_PUBLIC_API_KEY);
    // 其他业务逻辑
  }
  

额外提示 #

后端专属的敏感变量不要添加REMIX_PUBLIC_前缀，这类变量仅在服务器端代码中运行，不会被打包到前端资源中，安全性更有保障。

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