Next13 Route.ts对接Shopify Node API时出现statusCode读取错误求助

问题场景 #

尝试将Next.js 13的route.ts与Shopify Node API对接，从Shopify后台访问应用时触发以下错误。

GET 请求代码（route.ts） #

export async function GET(request: Request, res:Response) {
  const { searchParams } = new URL(request.url);
  const shop = searchParams.get('shop') as string;
  const service = new ShopifyService();
  return service.shopify.auth.begin({
    shop: service.shopify.utils.sanitizeShop(searchParams.get('shop'), true),
    callbackPath: '/auth/callback',
    isOnline: false,
    rawRequest: request,
  });
}

ShopifyService 类代码 #

export class ShopifyService {
    public shop: string | undefined;
    public accessToken: string | undefined;
    public shopify : any;
    constructor() {
         this.shopify = shopifyApi({
             apiKey: process.env.CLIENT_SECRET,
             apiSecretKey: process.env.CLIENT_ID!,
             scopes: process.env.SCOPES!.split(','),
             hostName: process.env.HOST!,
             apiVersion: ApiVersion.April22,
             isEmbeddedApp: true,
         });
    }
}

错误信息 #

- error TypeError: Cannot read properties of undefined (reading 'statusCode')
    at eval (webpack-internal:///(sc_server)/./node_modules/@shopify/shopify-api/adapters/node/adapter.js:25:49)
    at Generator.next (<anonymous>)
    at eval (webpack-internal:///(sc_server)/./node_modules/tslib/tslib.es6.js:177:71)
    at new Promise (<anonymous>)
    at Module.__awaiter (webpack-internal:///(sc_server)/./node_modules/tslib/tslib.es6.js:159:12)
    at nodeConvertIncomingResponse (webpack-internal:///(sc_server)/./node_modules/@shopify/shopify-api/adapters/node/adapter.js:23:20)
    at eval (webpack-internal:///(sc_server)/./node_modules/@shopify/shopify-api/lib/auth/oauth/oauth.js:42:79)
    at Generator.next (<anonymous>)
    at fulfilled (webpack-internal:///(sc_server)/./node_modules/tslib/tslib.es6.js:162:32)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

提问 #

请问我遗漏了什么配置或代码？

问题原因与修复方案 #

1. API密钥与密钥赋值颠倒 #

Shopify API初始化时，apiKey和apiSecretKey的取值搞反了：

• apiKey对应Shopify后台的API密钥（环境变量CLIENT_ID）
• apiSecretKey对应Shopify后台的API密钥密码（环境变量CLIENT_SECRET）

修复后的ShopifyService构造函数：

constructor() {
     this.shopify = shopifyApi({
         apiKey: process.env.CLIENT_ID!,
         apiSecretKey: process.env.CLIENT_SECRET!,
         scopes: process.env.SCOPES!.split(','),
         hostName: process.env.HOST!,
         apiVersion: ApiVersion.April22,
         isEmbeddedApp: true,
     });
}

2. Next.js Route Handler 响应格式不兼容 #

Shopify Node API的auth.begin()返回的是适配Express等传统框架的响应对象，而Next.js 13的Route Handler要求返回标准的Response实例。需要手动转换响应格式：

修改后的GET方法：

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const shopParam = searchParams.get('shop');
  
  if (!shopParam) {
    return new Response('缺少shop参数', { status: 400 });
  }

  const service = new ShopifyService();
  const authResult = await service.shopify.auth.begin({
    shop: service.shopify.utils.sanitizeShop(shopParam, true),
    callbackPath: '/auth/callback',
    isOnline: false,
    rawRequest: request,
  });

  // 转换为Next.js兼容的Response
  return new Response(authResult.body, {
    status: authResult.statusCode,
    headers: authResult.headers,
  });
}

3. 额外配置检查 #

• 确认ApiVersion.April22为Shopify当前支持的版本，建议使用较新的稳定版本（如ApiVersion.July24）
• HOST环境变量需为不带协议前缀的纯域名（例如yourapp.vercel.app）
• SCOPES环境变量格式需正确，避免多余空格（例如read_products,write_orders）

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