从Proto生成TypeScript文件后React+TS项目出现Can't resolve错误

核心排查步骤 #

• 检查生成文件的导入路径
  查看报错代码行的导入语句，确认路径是否存在层级错误：比如相对路径的../数量不对，或者绝对路径未在项目配置中被识别。同时核对protoc命令里的import_style参数值——如果用commonjs要确保项目支持CommonJS模块；用es6则要匹配项目的模块解析配置。

• 验证protoc命令的路径参数
  确认-I参数指定的proto搜索路径是否覆盖了所有被导入的proto文件，生成的TS文件依赖路径才会正确；同时检查$OUT_DIR的输出路径是否在React项目的src目录下，或者是否被加入tsconfig.json的include数组中，让项目能识别到这些生成文件。

• 检查项目的模块解析配置
  打开tsconfig.json查看baseUrl和paths配置，确保生成文件的导入路径能被正确解析；如果用Webpack或Vite，检查对应配置文件里的resolve.alias，是否需要为生成的proto模块添加别名映射。

• 验证插件版本兼容性
  确认protoc-gen-ts和protoc-gen-grpc-web的版本与protoc、React/TypeScript版本兼容，版本不匹配可能导致生成代码出现路径或语法问题。可以尝试替换为最新稳定版插件重新生成文件。

• 检查生成文件的完整性
  确认所有依赖的proto文件都生成了对应的TS文件，没有遗漏依赖导致找不到模块；同时核对生成TS文件里的import语句，对应的目标文件是否确实存在于指定路径下。

简化测试建议 #

如果以上步骤未解决问题，先简化命令测试单个proto文件：

protoc -I=./src/your-service -I=./path-to-imports ./src/your-service/Protos/your-proto-file.proto \
    --plugin=protoc-gen-ts=./node_modules/.bin/protoc-gen-ts \
    --plugin=protoc-gen-grpc-web=./node_modules/.bin/protoc-gen-grpc-web \
    --grpc-web_out=import_style=es6,mode=grpcwebtext:./src/generated

查看生成文件的导入路径是否正常，再逐步扩展到所有proto文件。

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