在Vercel部署Hydrogen Shopify应用时出现EDGE_FUNCTION_INVOCATION_FAILED错误

排查与修复方案 #

• 核对环境变量配置
  确保Vercel项目中已配置所有Hydrogen必需的环境变量，且值准确无误：

  • SHOPIFY_STORE_DOMAIN：格式为xxx.myshopify.com的店铺域名
  • SHOPIFY_STOREFRONT_API_TOKEN：Shopify后台生成的前台API令牌
  • PUBLIC_STOREFRONT_API_VERSION：匹配当前使用的Shopify API版本（如2024-04）
    配置路径：Vercel项目「Settings > Environment Variables」，部署前确认变量已同步到生产环境。

• 适配Hydrogen与Vercel版本
  部分Hydrogen旧版本与Vercel边缘函数存在兼容性问题：

  1. 打开项目package.json，将@shopify/hydrogen版本锁定为^2023.10.0及以上
  2. 执行npm install更新依赖后重新触发部署

• 修正Vercel边缘函数配置
  检查vercel.json的路由与运行时配置是否符合Hydrogen要求：

  {
    "functions": {
      "app/**/*.{js,ts,jsx,tsx}": {
        "runtime": "@vercel/node@3"
      }
    },
    "routes": [
      {
        "src": "/(.*)",
        "dest": "/app/render.tsx"
      }
    ]
  }
  

  确保路由指向Hydrogen的入口渲染文件，运行时版本与依赖兼容。

• 验证Shopify API权限
  登录Shopify后台，进入「设置 > 应用和销售渠道 > 开发应用」，找到对应应用的前台API令牌，确认已勾选业务所需的权限（如read_products、read_collections），权限不足会导致边缘函数调用失败。

• 查看具体错误栈
  若以上步骤无效，前往Vercel控制台「Functions > Edge Functions」，查看详细错误日志，定位代码中的语法错误、未捕获异常或资源加载问题。

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