---

背景

最近在使用 Taro 4 开发一个 React + 支付宝小程序的支付项目时，遇到了一个令人头疼的编译错误。折腾了很久，最终确定是 Vite 编译模式与支付宝小程序插件不兼容 导致的，切换到 Webpack5 后问题彻底解决。

本文记录了完整的排查过程和解决方案，希望能帮助遇到同样问题的同学。

一、环境信息

• Taro CLI: v4.1.11

• Node.js: v20.13.1 / v22.22.1

• 编译工具: Vite（初始选择）

• 目标平台: 支付宝小程序

• 插件: @tarojs/plugin-platform-alipay

二、错误现象

执行 npm run dev:alipay 时，终端输出如下错误并退出：

bash

✔ Webpack
  Compiled successfully in 1.43s

/Users/xxx/node_modules/@tarojs/vite-runner/dist/mini/emit.js:188
                                    if (chunk.type === 'asset') {
                                              ^

TypeError: Cannot read properties of undefined (reading 'type')
    at Object.set (/Users/xxx/node_modules/@tarojs/vite-runner/src/mini/emit.ts:191:25)
    at Object.fn (/Users/xxx/node_modules/@tarojs/plugin-platform-alipay/src/program.ts:121:32)
    ...

编译进程直接崩溃，dist 目录无法正常生成，支付宝小程序开发者工具无法预览。

三、尝试过但无效的方案

1. 删除注释 – 检查了 project.alipay.json 中的 JSON 注释，删除后问题依旧。

2. 升级 Node.js – 从 v20.13.1 升级到 v22.22.1，错误依然存在。

3. 清除缓存 – rm -rf node_modules/.cache dist 后重新编译，无效。

4. 统一 Taro 依赖版本 – 确保所有 @tarojs/* 包版本一致，无效。

5. 添加 compiler: 'webpack5' – 在原 Vite 项目中强行指定编译器，仍然报错（说明项目初始化时已绑定 Vite 运行器）。

四、根本原因分析

Taro 4 提供了两种编译工具：Vite 和 Webpack5。

• Vite 模式 主要为 H5 端优化，启动快、热更新快，但对支付宝、微信等小程序端的支持尚不成熟。

• 支付宝小程序插件（@tarojs/plugin-platform-alipay）在 Vite 模式下构建时，内部调用的 emit.ts 中对 chunk 对象的类型判断出现了 undefined，这是 Vite 运行器与支付宝插件之间的已知兼容性问题。

简单说：Vite + 支付宝小程序 ≠ 稳定。

五、最终解决方案：切换到 Webpack5

步骤一：删除旧项目（或换个目录重新创建）

bash

cd /your/workspace
rm -rf payment-app   # 备份后删除

步骤二：使用 Webpack5 模板重新初始化

bash

npx @tarojs/cli init payment-app

在交互式选项中务必选择：

选项	选择
框架	React
TypeScript	Yes
编译为 ES5	N
CSS 预处理器	Sass（或任意）
编译工具	Webpack5 ← 关键
模板源	Gitee（最快）
模板	默认模板 或 mobx

步骤三：安装支付宝小程序插件

bash

cd payment-app
npm install @tarojs/plugin-platform-alipay --save-dev

步骤四：修改 config/index.js

在 plugins 数组中添加支付宝插件：

js

const config = {
  // ... 原有配置
  plugins: ['@tarojs/plugin-platform-alipay'],
}
module.exports = config

步骤五：创建 project.alipay.json

在项目根目录新建文件，内容如下（纯 JSON，不要加注释）：

json

{
  "appid": "202100011xxxxxxxx"
}

没有正式 AppID 可以先留占位符，但支付功能必须使用真实的企业小程序 AppID。

步骤六：启动编译

bash

npm run dev:alipay

成功输出：

text

✔ Webpack
  Compiled successfully in 551.27ms

→ Watching... 

编译  发现入口  src/app.ts
编译  发现页面  src/pages/index/index.tsx

此时 dist 目录正常生成，可以用支付宝小程序开发者工具打开预览。

六、验证结果

• ✅ 编译不再报错

• ✅ 支付宝小程序开发者工具可以正常加载项目

• ✅ 代码修改后自动重新编译，热更新正常

• ✅ 支付 API（Taro.tradePay）可正常调用（需后端配合）

七、总结与建议

编译工具	H5 支持	支付宝小程序支持	稳定性
Vite	✅ 优秀	❌ 存在兼容性 bug	低
Webpack5	✅ 良好	✅ 完全兼容	高

结论：
如果你要开发支付宝小程序（或微信小程序），请毫不犹豫地选择 Webpack5 作为编译工具。Vite 虽快，但在小程序生态中尚不成熟，可能会浪费大量排查时间。

扩展建议：

• 开发 H5 项目时，可以继续使用 Vite 获得更快的开发体验。

• 如果是跨端项目（小程序 + H5），建议统一使用 Webpack5，避免两套配置维护成本。

八、附：成功启动后的下一步

项目跑通后，就可以愉快地写支付代码了。示例：

tsx

import Taro from '@tarojs/taro'

const handlePay = () => {
  Taro.tradePay({
    tradeNO: '从后端获取的交易号',
    success(res) {
      if (res.resultCode === '9000') Taro.showToast({ title: '支付成功' })
    }
  })
}

注意：tradeNO 必须由后端调用支付宝服务端 API 生成，前端不可直接写死。

---

希望这篇记录能帮你少走弯路。如果你也遇到了类似的 Vite + 小程序编译问题，不妨直接切换到 Webpack5，省时省力。