Search code examples
reactjsprotocol-buffersvitegrpctypescript-typings

Probuf compiler with typescript vite react application

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.

my generated files

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.

Console error

file and line with the console error

I am expecting verything to run fine without errors. I follow this guy's tutorial for doing this grpc set up.

https://www.youtube.com/watch?v=NFZbTy_B4H0&t=1894s

Solution

  • 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