DEV Community

Use gRPC with Node.js and Typescript

Aria Azadi Pour on October 08, 2021

gRPC is a modern open-source high-performance Remote Procedure Call (RPC) framework that can run in any environment. And in this article, I am goin...

Read full post

Ukor Jidechi E. • Jul 5 '23

If you having issues (like below) running the buf generate command.

Failure: plugin js: js moved to a separate plugin hosted at https://github.com/protocolbuffers/protobuf-javascript in v21, you must install this plugin

Use the protobuf-es.

Install the dependency

npm install @bufbuild/protobuf @bufbuild/protoc-gen-es @bufbuild/buf

Replace the content of your buf.gen.yaml file with

version: v1
plugins:
  - plugin: es
    opt: target=ts
    out: ../src/proto

Then run npx buf generate

Claus Volko • Apr 24

Excuse me, but this fails to generate the *.ts and *_grpc_pb.ts files. How do I have to modify buf.gen.yaml to get all files?

Claus Volko • Apr 24

I noticed that if I do generate the _grpc_pb.js file (js instead of ts), I get the error:

SyntaxError: The requested module './proto/octants/v1/octants_grpc_pb' does not provide an export named 'DownloadOctantsService'

In my program this DownloadOctantsService is located in the _grpc_pb.js file and it is there, so apparently the reason for the error message is an incompatibility between JavaScript and TypeScript. Unfortunately translating the js file to ts using ChatGPT did not help since in that case, some methods referenced in the file are not found.

Jesper Kristiansen • Jul 12 '22

Great article. There are very few articles on typescript with gRPC.
I had to install grpc_tools_node_protoc_ts globally. Without it I got this error
Failure: plugin ts: could not find protoc plugin for name ts

running buf generate --debug gave this error

Failure: plugin grpc: exec: "grpc_tools_node_protoc_plugin": executable file not found in $PATH

and after installing globally buf generate works

Lorefnon • Aug 1 '22

If locally installed, node_modules/.bin has to be in path.

If instead of invoking it directly, we add an npm script to invoke it, then that will be taken care of by npm/yarn.

In package.json

{ 
    "scripts":  {
        "codegen:buf": "buf generate"
    }
}

Rupert Rawnsley • Sep 8 '22

Thanks for this tip. Didn't quite work for me until I copied the way the line above was structured:

"scripts": { "start": "nodemon src/server/index.ts --watch src/server", "start:client": "nodemon src/client/index.ts --watch src/client", "proto:build": "cd proto; buf build; cd ..", "codegen:buf": "cd proto; buf generate; cd .." },

Rupert Rawnsley • Sep 8 '22

To get npm run start to work I had to also install ts-node like this npm i --dev ts-node

Andriivyn • Mar 21 '23

After buf generare got this error
Maybe someone could help?

Failure: plugin js: js moved to a separate plugin hosted at https://github.com/protocolbuffers/protobuf-javascript in v21, you must install this plugin; js moved to a separate plugin hosted at https://github.com/protocolbuffers/protobuf-javascript in v21, you must install this plugin

Blonteractor • Apr 2 '23

figured it out?

Artiom Neganov • Jun 29 '22

Do you know what "/" (slash) means?

Aria Azadi Pour • Jun 30 '22

If you are reffering to the text like /src, / means the root directory of the project.

Artiom Neganov • Jul 1 '22

Ah, that's the source of the confusion.
/ never actually means the root of a project. It's always the root of the filesystem.

E.g. this:

/proto: proto buffers folder(I will explain more later)
/src: the source directory
/src/server: server directory
/src/client: client directory
/src/proto: auto generated code from proto buffers

should read:

proto/: proto buffers folder(I will explain more later)
src/: the source directory
src/server/: server directory
src/client/: client directory
src/proto/: auto generated code from proto buffers

Aria Azadi Pour • Jul 1 '22

Yes, but when used in this manner it is generally regarded as the root of the project.