Shopify App开发CLI 3导入Shopify-api时Vite报错：optimized info should be defined

核心原因 #

@shopify/shopify-api 主要面向 Node.js 后端环境，Vite 在前端环境预构建依赖时，无法正确识别其模块结构，导致预构建流程失败。

具体修复步骤 #

• 配置 Vite 跳过依赖预构建
  在 vite.config.js/vite.config.ts 中，将该包标记为外部依赖，让 Vite 跳过对它的预构建处理：

  import { defineConfig } from 'vite';
  
  export default defineConfig({
    build: {
      rollupOptions: {
        external: ['@shopify/shopify-api']
      }
    },
    optimizeDeps: {
      exclude: ['@shopify/shopify-api']
    }
  });
  

• 转移至后端环境调用
  @shopify/shopify-api 包含签名验证、密钥处理等后端专属功能，不适合在前端浏览器环境直接使用。建议将 Shopify API 请求逻辑放在 Node.js 后端服务中，前端通过接口调用后端间接完成交互，避免暴露敏感密钥。

• 调整包版本
  部分版本的 @shopify/shopify-api 与当前 Vite 版本存在兼容性问题，可尝试切换至稳定版本（比如 @shopify/shopify-api@6.2.0）：

  npm uninstall @shopify/shopify-api
  npm install @shopify/shopify-api@6.2.0
  

• 清除 Vite 缓存
  删除预构建缓存后重启开发服务：

  rm -rf node_modules/.vite
  npm run dev
  

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