Remix（Shopify）客户端因pg模块抛出process is not defined错误

问题原因 #

Remix默认会将组件文件中所有import的模块打包到客户端，哪怕这些模块仅在服务端的loader函数中使用。pg是Node.js专属模块，内部依赖process等服务端环境变量，客户端环境不存在这些变量，因此触发报错。

解决方案 #

利用Remix的服务端专属文件约定，将依赖pg的代码隔离到仅服务端运行的文件中，避免客户端打包这些模块。

步骤1：标记服务端专属文件 #

给所有依赖Node.js原生模块的文件添加.server后缀，比如：

• 将shopDAO.js重命名为shopDAO.server.js
• 将db.js重命名为db.server.js

步骤2：修改代码引用 #

修改shopDAO.server.js：

import pool from "~/db/db.server"; // 引用服务端专属的db模块

class ShopDAO {
  async read(shopName) {
    const query = `
      SELECT * FROM shop WHERE name = $1;
    `;

    try {
      const { rows } = await pool.query(query, [shopName]);
      return rows[0];
    } catch (error) {
      console.error(`Could not read shop: ${error}`);
      throw error;
    }
  }
}

export default new ShopDAO;

修改db.server.js（示例）：

import { Pool } from "pg";

const pool = new Pool({
  host: process.env.DB_HOST,
  user: process.env.DB_USER,
  password: process.env.DB_PASSWORD,
  database: process.env.DB_NAME,
  port: process.env.DB_PORT,
});

export default pool;

修改app/_index.jsx：

import { authenticate } from "../shopify.server";
import { useLoaderData } from "@remix-run/react";
import { json } from "@remix-run/node";
// 引用服务端专属的DAO模块（.server后缀会被Remix识别为仅服务端加载）
import ShopDAO from '~/dao/shopDAO.server';

export const loader = async ({ request }) => {
  const auth = await authenticate.admin(request);
  const shopName = auth.session.shop;
  const data = await ShopDAO.read(shopName);

  return json(data);
};

export default function Index() {
  const data = useLoaderData();

  console.log(data)

  return (
    <p>Index</p>
  );
}

关键说明 #

Remix会自动识别.server后缀的文件，仅在服务端加载和执行这些文件，不会将其打包到客户端代码中，彻底避免了客户端加载pg模块导致的环境变量错误。

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