Unresolved HTTP2 dependency in grpc-js for bidirectional RPCs - vue.js

Question

So I'm creating a client for chatting application using grpc and vue-cli client.
My proto file looks like this:
syntax = "proto3";
package chat;
option go_package = "backend/proto";
message ChatMessage {
string msg = 1;
}
service ChatService {
rpc Chat(stream ChatMessage) returns (stream ChatMessage) {}
}
at first i tried creating static client side stubs by the following command:
$ protoc --proto_path=proto --js_out=import_style=commonjs,binary:frontend/src --grpc-web_out=import_style=commonjs,mode=grpcwebtext:frontend/src proto/chat.proto
however the Chat endpoint is not being generated in the chat_grcp_web_pb.js file.
I then turned to the dynamic way of generating the services from a proto file as defined in the Basics Tutorial here
But while compiling my vue client with npm run serve , it gives an error:
ERROR Failed to compile with 1 error 9:51:48 PM
This dependency was not found:
* http2 in ./node_modules/#grpc/grpc-js/build/src/server.js
To install it, you can run: npm install --save http2
Sidenote: I already have http2 but apparently webpack isn't linking it so i ran the command suggested in the error above. But after that it gives 2 warnings and fails to compile:
warning in ./node_modules/http2/lib/protocol/index.js
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
warning in ./node_modules/defaultable/defaultable.js
Critical dependency: the request of a dependency is an expression
My node version is 16.4.2 and npm version is 7.19.1, and my App.vue file looks like this:
import * as grpc from '#grpc/grpc-js'
import * as proto_loader from '#grpc/proto-loader'
var PROTO_PATH = __dirname + '../../../proto/chat.proto'
var package_definition = proto_loader.loadSync(
PROTO_PATH,
{keepCase: true,
longs: String,
enums: String,
defaults: true,
oneofs: true
});
var proto_descriptor = grpc.loadPackageDefinition(package_definition);
var chat_service = proto_descriptor.chat_service;
new chat_service.ChatService(URL, grpc.credentials.createInsecure())
Any help to solve this issue would be appreciated!

Answer 1

The #grpc/grpc-js library is only made to work in recent versions of Node.js (and Electron). The http2 module is built in to Node.js, so if you don't have it, you're probably not running it on a supported platform.
If you are trying to use gRPC in a browser, you should be using grpc-web instead.