vue.js - 双方向 RPC の grpc-js における未解決の HTTP2 依存関係

Question

そこで、grpc と vue-cli クライアントを使用してチャット アプリケーション用のクライアントを作成しています。私のプロトファイルは次のようになります。

syntax = "proto3";
package chat;
option go_package = "backend/proto";

message ChatMessage {
    string msg = 1;
}

service ChatService {
    rpc Chat(stream ChatMessage) returns (stream ChatMessage) {}
}

最初に、次のコマンドで静的クライアント側スタブを作成しようとしました:

$ 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

ただし、Chatエンドポイントは chat_grcp_web_pb.js ファイルで生成されていません。次に、こちらの基本チュートリアルで定義されているように、proto ファイルからサービスを動的に生成する方法に目を向けました。

しかし、vue クライアントを でコンパイルしているnpm run serveときに、エラーが発生します。

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

サイドノート: 私は既に http2 を持っていますが、どうやら webpack はそれをリンクしていないので、上記のエラーで提案されたコマンドを実行しました。しかしその後、2 つの警告が表示され、コンパイルに失敗します。

 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

ノードのバージョンは 16.4.2 で、npm のバージョンは 7.19.1 で、App.vue ファイルは次のようになります。

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())

この問題を解決するための助けをいただければ幸いです。