ReactJS使用grpc-web调用gRPC后端报reading 'MethodInfo'类型错误如何解决

问题根因 #

该报错本质是自动生成的proto编译代码引用的grpc.web.AbstractClientBase对象未挂载，绝大多数由编译工具版本和前端依赖版本不匹配、生成代码的导入规则配置错误导致，可按以下步骤排查解决：

排查解决步骤 #

• 对齐工具与依赖版本
  首先保证编译proto用的protoc-gen-grpc-web插件版本和项目npm安装的grpc-web依赖版本完全一致。执行protoc-gen-grpc-web --version查看本地插件版本，再对照项目package.json里的grpc-web版本，不一致的话卸载两边重装相同版本即可。
• 校验生成代码的导入配置
  编译proto时指定的import_style要和你的React项目模块规范匹配。如果用CommonJS规范，编译参数加--grpc-web_out=import_style=commonjs,mode=grpcwebtext:.；如果用ES6模块规范，参数改成--grpc-web_out=import_style=es6,mode=grpcwebtext:.。生成的代码顶部导入语句如果是var grpc = require('grpc-web')，ES模块项目要改成import * as grpc from 'grpc-web'。
• 调整对象引用路径
  部分版本的grpc-web调整了内置对象的挂载位置，可直接修改生成的dashboard_services_grpc_web_pb.js文件里的报错行，将

const methodInfo_DashboardService_userLogin = new grpc.web.AbstractClientBase.MethodInfo( ...... );

替换为

const methodInfo_DashboardService_userLogin = new grpc.MethodInfo( ...... );

即可快速解决引用不存在的问题。如果不想每次编译proto都手动修改，优先对齐工具与依赖版本从根源解决问题。

• 排查打包配置
  如果用webpack/vite等打包工具，检查是否配置了externals错误排除了grpc-web依赖，或者tree-shaking规则误删了grpc-web的导出内容，可临时在打包配置中关闭grpc-web的tree-shaking验证，确认是否是打包规则导致的对象丢失。

内容的提问来源于stack exchange，提问作者Asma Rahim Ali Jafri