React Vite TypeScript项目gRPC-Web代码生成后运行报错求助

1. 补全依赖安装 #

先确认前端所需的 gRPC-web 和 protobuf 依赖是否安装：

yarn add @grpc/web google-protobuf
yarn add -D @types/google-protobuf

2. 调整 protoc 生成命令的模块格式 #

你当前用了 commonjs 风格生成 JS 代码，但 Vite 默认使用 ES 模块，容易出现导入导出兼容问题，建议改成 ES6 风格：

protoc --js_out=import_style=es6,binary:./src/proto --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src/proto -I ../back_end/proto ../back_end/proto/*.proto

重新生成代码后替换原文件。

3. 配置 Vite 适配模块规则 #

如果坚持使用 CommonJS 生成的代码，需要在 vite.config.ts 中添加转译配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['google-protobuf', '@grpc/web'],
    esbuildOptions: {
      target: 'es2020'
    }
  },
  resolve: {
    alias: {
      '@/proto': '/src/proto'
    }
  }
})

别名配置可以避免导入路径出错，后续导入时直接用 @/proto/Twitter_cloneServiceClientPb.ts 即可。

4. 校验客户端初始化细节 #

• 检查导入路径：确认 ../../proto/Twitter_cloneServiceClientPb.ts 与你的项目目录结构匹配，比如如果 ClientService 在 src/services 下，路径应该是 ../proto/... 或者用上面配置的别名。
• 确认 APP_URL 正确性：gRPC-web 不能直接连接原生 gRPC 端口（如 50051），需要指向后端的 gRPC-web 代理地址（如 http://localhost:8080），且代理服务必须已启动。

5. 根据控制台报错精准排查 #

如果以上步骤无效，查看浏览器控制台的具体错误：

• 若出现 require is not defined：说明 CommonJS 模块未被转译，回到步骤 2 或 3 调整配置。
• 若出现 Cannot find module：修正导入路径或别名配置。
• 若出现网络错误：检查后端代理服务状态和 APP_URL 的可达性。

内容的提问来源于stack exchange，提问作者Gao XiangShuai