I have set up a react vite application in typescript and I woud like to use google grpc for api requests. I have a protobuf file made and I use the following command to generate the front end code for my react application to make grpc requests with.
protoc --js_out=import_style=commonjs:./src/proto --grpc-web_out=import_style=typescript,mode=grpcwebtext:./src/proto -I ../back_end/proto ../back_end/proto/*.proto
It creates three files inside my src/proto dir.
I import the one of the client from Twitter_cloneServiceClientPb.ts into another utility class like so
import { UserClient } from "../../proto/Twitter_cloneServiceClientPb";
import { APP_URL } from "../../utils/constants";
export class ClientService {
private client: UserClient;
constructor(){
this.client = new UserClient(APP_URL);
}
}
When I do yarn run dev and open up the webrowser, nothing appeared. Checking the console, this error appears. I am at a loss here.
I am expecting verything to run fine without errors. I follow this guy's tutorial for doing this grpc set up.
I figoured it out. If you are using typescript and vite like I am, make sure to npm install this plugin before you do the protoc compile. https://github.com/timostamm/protobuf-ts
The protoc command I used is
protoc --ts_out ./src/proto --proto_path ../back_end/proto ../back_end/proto/*.proto