http2 is null when trying to use a web client in the browser

[NathanPB]

First, thanks for this generator. It looks awesome so far, way easier to use than others that I found. However, I am having one problem.

I installed it from npmjs yarn add protoc-gen-ts and generated a web client with:

protoc -I=../../apps/dataguru/proto --ts_out=src/__generated__ --ts_opt=target=web,explicit_override ../../apps/dataguru/proto/*.proto

When I try to use the code in a React application (bundled with Vite), it crashes with:

TypeError: http2 is null
    node_modules grpc/grpc-js/build/src/call-stream.js@http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/@grpc_grpc-js.js?v=cc6ab437:702
    __require http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/chunk-WSGO6GMI.js?v=cc6ab437:19
    node_modules grpc/grpc-js/build/src/channel.js@http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/@grpc_grpc-js.js?v=cc6ab437:23024
    __require http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/chunk-WSGO6GMI.js?v=cc6ab437:19
    node_modules grpc/grpc-js/build/src/index.js@http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/@grpc_grpc-js.js?v=cc6ab437:26422
    __require http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/chunk-WSGO6GMI.js?v=cc6ab437:19
    <anonymous> http://localhost:4200/@fs/home/nathan/Projects/gssat/node_modules/.vite/apps/web-ui/deps/@grpc_grpc-js.js?v=cc6ab437:26572

The generated imports seem nice, they are using grpc-web:

import * as pb_1 from "google-protobuf";
import * as grpc_1 from "@grpc/grpc-js";
import * as grpc_web_1 from "grpc-web";

I went to look at the bundled source code and found this in @grpc/grpc-web:

    var http2 = require_empty();
    var os = require_browser();
    var constants_1 = require_constants();
    var metadata_1 = require_metadata();
    var stream_decoder_1 = require_stream_decoder();
    var logging = require_logging();
    var constants_2 = require_constants();
    var TRACER_NAME = "call_stream";
    var { HTTP2_HEADER_STATUS, HTTP2_HEADER_CONTENT_TYPE, NGHTTP2_CANCEL } = http2.constants;

This is where the crash happens, as require_empty() basically just returns null:

// node_modules/node-stdlib-browser/cjs/mock/empty.js
var require_empty = __commonJS({
  "node_modules/node-stdlib-browser/cjs/mock/empty.js"(exports, module) {
    "use strict";
    var import_dist = __toESM(require_dist());
    var import_dist2 = __toESM(require_dist2());
    var import_dist3 = __toESM(require_dist3());
    var empty = null;
    module.exports = empty;
  }
});

I don't really know how to proceed from here, hope some of you could help me.

Versions:
protoc-gen-ts: 0.8.7
grpc-web: 1.5.0
vite: 5.0.0
protoc --version: libprotoc 25.3

[thesayyn]

Hmm, when only grpc-web is used, we should avoid adding the grpc-js import, that where the problem is coming from. PRs are welcome.