Shopify Remix环境变量无法访问，提示process is not defined

Shopify Remix（Oxygen）基于Cloudflare Workers运行时，不支持Node.js的process对象，直接访问process.env会抛出process is not defined错误，以下是具体解决方案：

1. 修正服务端环境变量读取逻辑 #

修改app/env/env.server.ts，改用Oxygen官方提供的方式获取环境变量，同时补全缺失的Zod导入：

import z from 'zod';
import { ZodFormattedError } from 'zod';
import { getEnv } from '@shopify/remix-oxygen';

const serverSchema = z.object({
  KLAVIYO_API_KEY: z.string(),
  KLAVIYO_GLOBAL_LIST_ID: z.string(),
  KLAVIYO_API_VERSION: z.string(),
});

// 使用Oxygen的getEnv替代process.env
const env = getEnv();
const _serverEnv = serverSchema.safeParse(env);

const formatErrors = (errors: ZodFormattedError<Map<string, string>, string>) =>
  Object.entries(errors)
    .map(([name, value]) => {
      if (value && '_errors' in value)
        return `${name}: ${value._errors.join(', ')}\n`;
    })
    .filter(Boolean);

if (_serverEnv.success === false) {
  console.error(
    '❌ Invalid environment variables:\n',
    ...formatErrors(_serverEnv.error.format()),
  );
  throw new Error('Invalid environment variables');
}

export const serverEnv = { ..._serverEnv.data };

2. 修正订阅函数的变量错误 #

routes/newsletter/subscribe.tsx中存在变量赋值错误（API_KEY被错误赋值为API_VERSION），同时调整响应返回逻辑：

import { ActionArgs, json } from '@shopify/remix-oxygen';
import { serverEnv } from '../../env/env.server';

export async function action({ request }: ActionArgs) {
  const email = (await request.formData()).get('email')?.toString() ?? '';
  try {
    const res = await subscribeToKlaviyoList(email);
    return json(await res.json()); // 先解析响应再返回
  } catch (error) {
    return json({ error: (error as Error).message, ok: false });
  }
}

export async function subscribeToKlaviyoList(
  email: string,
  source = 'Home Page Footer',
) {
  // 修正变量赋值错误
  const API_KEY = serverEnv.KLAVIYO_API_KEY;
  const API_VERSION = serverEnv.KLAVIYO_API_VERSION;
  const LIST_ID = serverEnv.KLAVIYO_GLOBAL_LIST_ID;

  return await fetch(
    'https://a.klaviyo.com/api/profile-subscription-bulk-create-jobs/',
    {
      method: 'POST',
      headers: {
        accept: 'application/json',
        revision: API_VERSION ?? '2023-01-24',
        'content-type': 'application/json',
        Authorization: `Klaviyo-API-Key ${API_KEY}`,
      },
      body: JSON.stringify({
        data: {
          type: 'profile-subscription-bulk-create-job',
          attributes: {
            list_id: LIST_ID,
            custom_source: source,
            subscriptions: [
              {
                channels: { email: ['MARKETING'] },
                email,
              },
            ],
          },
        },
      }),
    },
  );
}

3. 配置Oxygen后台环境变量 #

进入Shopify后台：Settings > Apps and sales channels > Manage apps > Oxygen > App settings，添加以下环境变量并保存：

• KLAVIYO_API_KEY
• KLAVIYO_GLOBAL_LIST_ID
• KLAVIYO_API_VERSION

保存后重新部署Oxygen站点，环境变量即可生效。

内容的提问来源于stack exchange，提问作者G.Rose