Generated Client not working

[mendokuse3]

I'm using a nestjs backend and used twirp-ts and ts-proto to generate files from my proto file. I was able to set up my controller and successfully get requests made via postman, but I'm struggling to get the client working on my frontend, which is a react/typescript project.
I used this command to generate the .ts and .twirp.ts files. I found that without setting the encode/json methods to be true, the generated files would contain errors due to not being able to find the encode functions.

protoc \
    -I ./src/protobufs/reverseLookup \
    --plugin=protoc-gen-ts_proto=./node_modules/.bin/protoc-gen-ts_proto \
    --plugin=protoc-gen-twirp_ts=./node_modules/.bin/protoc-gen-twirp_ts \
    --ts_proto_opt=esModuleInterop=true \
    --ts_proto_opt=outputClientImpl=false \
    --ts_proto_opt=outputEncodeMethods=true \
    --ts_proto_opt=outputJsonMethods=true \
    --ts_proto_out=./src/protobufs/reverseLookup \
    --twirp_ts_opt="ts_proto" \
    --ts_proto_opt=nestJs=true \
    --twirp_ts_out=./src/protobufs/reverseLookup \
    ./src/protobufs/reverseLookup/reverseLookup.proto

this is the generated .ts file

/* eslint-disable */
import { GrpcMethod, GrpcStreamMethod } from "@nestjs/microservices";
import _m0 from "protobufjs/minimal";
import { Observable } from "rxjs";

export const protobufPackage = "reverseLookup";

export interface ReversePhoneLookupRequest {
  phoneNumber: PhoneNumber | undefined;
}

export interface PhoneNumber {
  countryCode: number;
  number: number;
}

export interface Contact {
  firstName: string;
  lastName: string;
  middleName: string;
  phoneNumber: PhoneNumber | undefined;
  address: Address | undefined;
}

export interface Address {
  address1: string;
  address2: string;
  city: string;
  state: string;
  postalCode: string;
}

export interface ReversePhoneLookupResponse {
  contact: Contact | undefined;
}

export const REVERSE_LOOKUP_PACKAGE_NAME = "reverseLookup";

function createBaseReversePhoneLookupRequest(): ReversePhoneLookupRequest {
  return { phoneNumber: undefined };
}

export const ReversePhoneLookupRequest = {
  encode(message: ReversePhoneLookupRequest, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
    if (message.phoneNumber !== undefined) {
      PhoneNumber.encode(message.phoneNumber, writer.uint32(10).fork()).ldelim();
    }
    return writer;
  },

  decode(input: _m0.Reader | Uint8Array, length?: number): ReversePhoneLookupRequest {
    const reader = input instanceof _m0.Reader ? input : _m0.Reader.create(input);
    let end = length === undefined ? reader.len : reader.pos + length;
    const message = createBaseReversePhoneLookupRequest();
    while (reader.pos < end) {
      const tag = reader.uint32();
      switch (tag >>> 3) {
        case 1:
          if (tag !== 10) {
            break;
          }

          message.phoneNumber = PhoneNumber.decode(reader, reader.uint32());
          continue;
      }
      if ((tag & 7) === 4 || tag === 0) {
        break;
      }
      reader.skipType(tag & 7);
    }
    return message;
  },

  fromJSON(object: any): ReversePhoneLookupRequest {
    return { phoneNumber: isSet(object.phoneNumber) ? PhoneNumber.fromJSON(object.phoneNumber) : undefined };
  },

  toJSON(message: ReversePhoneLookupRequest): unknown {
    const obj: any = {};
    if (message.phoneNumber !== undefined) {
      obj.phoneNumber = PhoneNumber.toJSON(message.phoneNumber);
    }
    return obj;
  },
};

function createBasePhoneNumber(): PhoneNumber {
  return { countryCode: 0, number: 0 };
}

export const PhoneNumber = {
  encode(message: PhoneNumber, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
    if (message.countryCode !== 0) {
      writer.uint32(8).int32(message.countryCode);
    }
    if (message.number !== 0) {
      writer.uint32(16).int32(message.number);
    }
    return writer;
  },

  decode(input: _m0.Reader | Uint8Array, length?: number): PhoneNumber {
    const reader = input instanceof _m0.Reader ? input : _m0.Reader.create(input);
    let end = length === undefined ? reader.len : reader.pos + length;
    const message = createBasePhoneNumber();
    while (reader.pos < end) {
      const tag = reader.uint32();
      switch (tag >>> 3) {
        case 1:
          if (tag !== 8) {
            break;
          }

          message.countryCode = reader.int32();
          continue;
        case 2:
          if (tag !== 16) {
            break;
          }

          message.number = reader.int32();
          continue;
      }
      if ((tag & 7) === 4 || tag === 0) {
        break;
      }
      reader.skipType(tag & 7);
    }
    return message;
  },

  fromJSON(object: any): PhoneNumber {
    return {
      countryCode: isSet(object.countryCode) ? globalThis.Number(object.countryCode) : 0,
      number: isSet(object.number) ? globalThis.Number(object.number) : 0,
    };
  },

  toJSON(message: PhoneNumber): unknown {
    const obj: any = {};
    if (message.countryCode !== 0) {
      obj.countryCode = Math.round(message.countryCode);
    }
    if (message.number !== 0) {
      obj.number = Math.round(message.number);
    }
    return obj;
  },
};

function createBaseContact(): Contact {
  return { firstName: "", lastName: "", middleName: "", phoneNumber: undefined, address: undefined };
}

export const Contact = {
  encode(message: Contact, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
    if (message.firstName !== "") {
      writer.uint32(10).string(message.firstName);
    }
    if (message.lastName !== "") {
      writer.uint32(18).string(message.lastName);
    }
    if (message.middleName !== "") {
      writer.uint32(26).string(message.middleName);
    }
    if (message.phoneNumber !== undefined) {
      PhoneNumber.encode(message.phoneNumber, writer.uint32(34).fork()).ldelim();
    }
    if (message.address !== undefined) {
      Address.encode(message.address, writer.uint32(42).fork()).ldelim();
    }
    return writer;
  },

  decode(input: _m0.Reader | Uint8Array, length?: number): Contact {
    const reader = input instanceof _m0.Reader ? input : _m0.Reader.create(input);
    let end = length === undefined ? reader.len : reader.pos + length;
    const message = createBaseContact();
    while (reader.pos < end) {
      const tag = reader.uint32();
      switch (tag >>> 3) {
        case 1:
          if (tag !== 10) {
            break;
          }

          message.firstName = reader.string();
          continue;
        case 2:
          if (tag !== 18) {
            break;
          }

          message.lastName = reader.string();
          continue;
        case 3:
          if (tag !== 26) {
            break;
          }

          message.middleName = reader.string();
          continue;
        case 4:
          if (tag !== 34) {
            break;
          }

          message.phoneNumber = PhoneNumber.decode(reader, reader.uint32());
          continue;
        case 5:
          if (tag !== 42) {
            break;
          }

          message.address = Address.decode(reader, reader.uint32());
          continue;
      }
      if ((tag & 7) === 4 || tag === 0) {
        break;
      }
      reader.skipType(tag & 7);
    }
    return message;
  },

  fromJSON(object: any): Contact {
    return {
      firstName: isSet(object.firstName) ? globalThis.String(object.firstName) : "",
      lastName: isSet(object.lastName) ? globalThis.String(object.lastName) : "",
      middleName: isSet(object.middleName) ? globalThis.String(object.middleName) : "",
      phoneNumber: isSet(object.phoneNumber) ? PhoneNumber.fromJSON(object.phoneNumber) : undefined,
      address: isSet(object.address) ? Address.fromJSON(object.address) : undefined,
    };
  },

  toJSON(message: Contact): unknown {
    const obj: any = {};
    if (message.firstName !== "") {
      obj.firstName = message.firstName;
    }
    if (message.lastName !== "") {
      obj.lastName = message.lastName;
    }
    if (message.middleName !== "") {
      obj.middleName = message.middleName;
    }
    if (message.phoneNumber !== undefined) {
      obj.phoneNumber = PhoneNumber.toJSON(message.phoneNumber);
    }
    if (message.address !== undefined) {
      obj.address = Address.toJSON(message.address);
    }
    return obj;
  },
};

function createBaseAddress(): Address {
  return { address1: "", address2: "", city: "", state: "", postalCode: "" };
}

export const Address = {
  encode(message: Address, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
    if (message.address1 !== "") {
      writer.uint32(10).string(message.address1);
    }
    if (message.address2 !== "") {
      writer.uint32(18).string(message.address2);
    }
    if (message.city !== "") {
      writer.uint32(26).string(message.city);
    }
    if (message.state !== "") {
      writer.uint32(34).string(message.state);
    }
    if (message.postalCode !== "") {
      writer.uint32(42).string(message.postalCode);
    }
    return writer;
  },

  decode(input: _m0.Reader | Uint8Array, length?: number): Address {
    const reader = input instanceof _m0.Reader ? input : _m0.Reader.create(input);
    let end = length === undefined ? reader.len : reader.pos + length;
    const message = createBaseAddress();
    while (reader.pos < end) {
      const tag = reader.uint32();
      switch (tag >>> 3) {
        case 1:
          if (tag !== 10) {
            break;
          }

          message.address1 = reader.string();
          continue;
        case 2:
          if (tag !== 18) {
            break;
          }

          message.address2 = reader.string();
          continue;
        case 3:
          if (tag !== 26) {
            break;
          }

          message.city = reader.string();
          continue;
        case 4:
          if (tag !== 34) {
            break;
          }

          message.state = reader.string();
          continue;
        case 5:
          if (tag !== 42) {
            break;
          }

          message.postalCode = reader.string();
          continue;
      }
      if ((tag & 7) === 4 || tag === 0) {
        break;
      }
      reader.skipType(tag & 7);
    }
    return message;
  },

  fromJSON(object: any): Address {
    return {
      address1: isSet(object.address1) ? globalThis.String(object.address1) : "",
      address2: isSet(object.address2) ? globalThis.String(object.address2) : "",
      city: isSet(object.city) ? globalThis.String(object.city) : "",
      state: isSet(object.state) ? globalThis.String(object.state) : "",
      postalCode: isSet(object.postalCode) ? globalThis.String(object.postalCode) : "",
    };
  },

  toJSON(message: Address): unknown {
    const obj: any = {};
    if (message.address1 !== "") {
      obj.address1 = message.address1;
    }
    if (message.address2 !== "") {
      obj.address2 = message.address2;
    }
    if (message.city !== "") {
      obj.city = message.city;
    }
    if (message.state !== "") {
      obj.state = message.state;
    }
    if (message.postalCode !== "") {
      obj.postalCode = message.postalCode;
    }
    return obj;
  },
};

function createBaseReversePhoneLookupResponse(): ReversePhoneLookupResponse {
  return { contact: undefined };
}

export const ReversePhoneLookupResponse = {
  encode(message: ReversePhoneLookupResponse, writer: _m0.Writer = _m0.Writer.create()): _m0.Writer {
    if (message.contact !== undefined) {
      Contact.encode(message.contact, writer.uint32(10).fork()).ldelim();
    }
    return writer;
  },

  decode(input: _m0.Reader | Uint8Array, length?: number): ReversePhoneLookupResponse {
    const reader = input instanceof _m0.Reader ? input : _m0.Reader.create(input);
    let end = length === undefined ? reader.len : reader.pos + length;
    const message = createBaseReversePhoneLookupResponse();
    while (reader.pos < end) {
      const tag = reader.uint32();
      switch (tag >>> 3) {
        case 1:
          if (tag !== 10) {
            break;
          }

          message.contact = Contact.decode(reader, reader.uint32());
          continue;
      }
      if ((tag & 7) === 4 || tag === 0) {
        break;
      }
      reader.skipType(tag & 7);
    }
    return message;
  },

  fromJSON(object: any): ReversePhoneLookupResponse {
    return { contact: isSet(object.contact) ? Contact.fromJSON(object.contact) : undefined };
  },

  toJSON(message: ReversePhoneLookupResponse): unknown {
    const obj: any = {};
    if (message.contact !== undefined) {
      obj.contact = Contact.toJSON(message.contact);
    }
    return obj;
  },
};

export interface ReverseLookupServiceClient {
  reversePhoneLookup(request: ReversePhoneLookupRequest): Observable<ReversePhoneLookupResponse>;
}

export interface ReverseLookupServiceController {
  reversePhoneLookup(
    request: ReversePhoneLookupRequest,
  ): Promise<ReversePhoneLookupResponse> | Observable<ReversePhoneLookupResponse> | ReversePhoneLookupResponse;
}

export function ReverseLookupServiceControllerMethods() {
  return function (constructor: Function) {
    const grpcMethods: string[] = ["reversePhoneLookup"];
    for (const method of grpcMethods) {
      const descriptor: any = Reflect.getOwnPropertyDescriptor(constructor.prototype, method);
      GrpcMethod("ReverseLookupService", method)(constructor.prototype[method], method, descriptor);
    }
    const grpcStreamMethods: string[] = [];
    for (const method of grpcStreamMethods) {
      const descriptor: any = Reflect.getOwnPropertyDescriptor(constructor.prototype, method);
      GrpcStreamMethod("ReverseLookupService", method)(constructor.prototype[method], method, descriptor);
    }
  };
}

export const REVERSE_LOOKUP_SERVICE_NAME = "ReverseLookupService";

function isSet(value: any): boolean {
  return value !== null && value !== undefined;
}

And this is the generated .twirp.ts file

import {
  TwirpContext,
  TwirpServer,
  RouterEvents,
  TwirpError,
  TwirpErrorCode,
  Interceptor,
  TwirpContentType,
  chainInterceptors,
} from 'twirp-ts';
import {
  ReversePhoneLookupRequest,
  ReversePhoneLookupResponse,
} from './reverselookup';

//==================================//
//          Client Code             //
//==================================//

interface Rpc {
  request(
    service: string,
    method: string,
    contentType: 'application/json' | 'application/protobuf',
    data: object | Uint8Array,
  ): Promise<object | Uint8Array>;
}

export interface ReverseLookupServiceClient {
  ReversePhoneLookup(
    request: ReversePhoneLookupRequest,
  ): Promise<ReversePhoneLookupResponse>;
}

export class ReverseLookupServiceClientJSON
  implements ReverseLookupServiceClient
{
  private readonly rpc: Rpc;
  constructor(rpc: Rpc) {
    this.rpc = rpc;
    this.ReversePhoneLookup.bind(this);
  }
  ReversePhoneLookup(
    request: ReversePhoneLookupRequest,
  ): Promise<ReversePhoneLookupResponse> {
    const data = ReversePhoneLookupRequest.toJSON(request);
    const promise = this.rpc.request(
      'reverseLookup.ReverseLookupService',
      'ReversePhoneLookup',
      'application/json',
      data as object,
    );
    return promise.then((data) =>
      ReversePhoneLookupResponse.fromJSON(data as any),
    );
  }
}

export class ReverseLookupServiceClientProtobuf
  implements ReverseLookupServiceClient
{
  private readonly rpc: Rpc;
  constructor(rpc: Rpc) {
    this.rpc = rpc;
    this.ReversePhoneLookup.bind(this);
  }
  ReversePhoneLookup(
    request: ReversePhoneLookupRequest,
  ): Promise<ReversePhoneLookupResponse> {
    const data = ReversePhoneLookupRequest.encode(request).finish();
    const promise = this.rpc.request(
      'reverseLookup.ReverseLookupService',
      'ReversePhoneLookup',
      'application/protobuf',
      data,
    );
    return promise.then((data) =>
      ReversePhoneLookupResponse.decode(data as Uint8Array),
    );
  }
}

//==================================//
//          Server Code             //
//==================================//

export interface ReverseLookupServiceTwirp<
  T extends TwirpContext = TwirpContext,
> {
  ReversePhoneLookup(
    ctx: T,
    request: ReversePhoneLookupRequest,
  ): Promise<ReversePhoneLookupResponse>;
}

export enum ReverseLookupServiceMethod {
  ReversePhoneLookup = 'ReversePhoneLookup',
}

export const ReverseLookupServiceMethodList = [
  ReverseLookupServiceMethod.ReversePhoneLookup,
];

export function createReverseLookupServiceServer<
  T extends TwirpContext = TwirpContext,
>(service: ReverseLookupServiceTwirp<T>) {
  return new TwirpServer<ReverseLookupServiceTwirp, T>({
    service,
    packageName: 'reverseLookup',
    serviceName: 'ReverseLookupService',
    methodList: ReverseLookupServiceMethodList,
    matchRoute: matchReverseLookupServiceRoute,
  });
}

function matchReverseLookupServiceRoute<T extends TwirpContext = TwirpContext>(
  method: string,
  events: RouterEvents<T>,
) {
  switch (method) {
    case 'ReversePhoneLookup':
      return async (
        ctx: T,
        service: ReverseLookupServiceTwirp,
        data: Buffer,
        interceptors?: Interceptor<
          T,
          ReversePhoneLookupRequest,
          ReversePhoneLookupResponse
        >[],
      ) => {
        ctx = { ...ctx, methodName: 'ReversePhoneLookup' };
        await events.onMatch(ctx);
        return handleReverseLookupServiceReversePhoneLookupRequest(
          ctx,
          service,
          data,
          interceptors,
        );
      };
    default:
      events.onNotFound();
      const msg = `no handler found`;
      throw new TwirpError(TwirpErrorCode.BadRoute, msg);
  }
}

function handleReverseLookupServiceReversePhoneLookupRequest<
  T extends TwirpContext = TwirpContext,
>(
  ctx: T,
  service: ReverseLookupServiceTwirp,
  data: Buffer,
  interceptors?: Interceptor<
    T,
    ReversePhoneLookupRequest,
    ReversePhoneLookupResponse
  >[],
): Promise<string | Uint8Array> {
  switch (ctx.contentType) {
    case TwirpContentType.JSON:
      return handleReverseLookupServiceReversePhoneLookupJSON<T>(
        ctx,
        service,
        data,
        interceptors,
      );
    case TwirpContentType.Protobuf:
      return handleReverseLookupServiceReversePhoneLookupProtobuf<T>(
        ctx,
        service,
        data,
        interceptors,
      );
    default:
      const msg = 'unexpected Content-Type';
      throw new TwirpError(TwirpErrorCode.BadRoute, msg);
  }
}
async function handleReverseLookupServiceReversePhoneLookupJSON<
  T extends TwirpContext = TwirpContext,
>(
  ctx: T,
  service: ReverseLookupServiceTwirp,
  data: Buffer,
  interceptors?: Interceptor<
    T,
    ReversePhoneLookupRequest,
    ReversePhoneLookupResponse
  >[],
) {
  let request: ReversePhoneLookupRequest;
  let response: ReversePhoneLookupResponse;

  try {
    const body = JSON.parse(data.toString() || '{}');
    request = ReversePhoneLookupRequest.fromJSON(body);
  } catch (e) {
    if (e instanceof Error) {
      const msg = 'the json request could not be decoded';
      throw new TwirpError(TwirpErrorCode.Malformed, msg).withCause(e, true);
    }
  }

  if (interceptors && interceptors.length > 0) {
    const interceptor = chainInterceptors(...interceptors) as Interceptor<
      T,
      ReversePhoneLookupRequest,
      ReversePhoneLookupResponse
    >;
    response = await interceptor(ctx, request!, (ctx, inputReq) => {
      return service.ReversePhoneLookup(ctx, inputReq);
    });
  } else {
    response = await service.ReversePhoneLookup(ctx, request!);
  }

  return JSON.stringify(ReversePhoneLookupResponse.toJSON(response) as string);
}
async function handleReverseLookupServiceReversePhoneLookupProtobuf<
  T extends TwirpContext = TwirpContext,
>(
  ctx: T,
  service: ReverseLookupServiceTwirp,
  data: Buffer,
  interceptors?: Interceptor<
    T,
    ReversePhoneLookupRequest,
    ReversePhoneLookupResponse
  >[],
) {
  let request: ReversePhoneLookupRequest;
  let response: ReversePhoneLookupResponse;

  try {
    request = ReversePhoneLookupRequest.decode(data);
  } catch (e) {
    if (e instanceof Error) {
      const msg = 'the protobuf request could not be decoded';
      throw new TwirpError(TwirpErrorCode.Malformed, msg).withCause(e, true);
    }
  }

  if (interceptors && interceptors.length > 0) {
    const interceptor = chainInterceptors(...interceptors) as Interceptor<
      T,
      ReversePhoneLookupRequest,
      ReversePhoneLookupResponse
    >;
    response = await interceptor(ctx, request!, (ctx, inputReq) => {
      return service.ReversePhoneLookup(ctx, inputReq);
    });
  } else {
    response = await service.ReversePhoneLookup(ctx, request!);
  }

  return Buffer.from(ReversePhoneLookupResponse.encode(response).finish());
}

I'm trying to access it from my frontend like this

const jsonClient = new ReverseLookupServiceClientJSON(FetchRPC({
              baseUrl: "http://localhost:3000"
            }))

but I get this error in the console

@nestjs_microservices.js?v=9946f31f:35061 Uncaught TypeError: Class extends value undefined is not a constructor or null
    at node_modules/@nestjs/core/router/sse-stream.js (@nestjs_microservices.js?v=9946f31f:35061:44)
    at __require2 (chunk-AUZ3RYOM.js?v=9946f31f:18:50)
    at node_modules/@nestjs/core/router/router-response-controller.js (@nestjs_microservices.js?v=9946f31f:35131:24)
    at __require2 (chunk-AUZ3RYOM.js?v=9946f31f:18:50)
    at node_modules/@nestjs/core/router/router-execution-context.js (@nestjs_microservices.js?v=9946f31f:35223:40)
    at __require2 (chunk-AUZ3RYOM.js?v=9946f31f:18:50)
    at node_modules/@nestjs/core/router/router-explorer.js (@nestjs_microservices.js?v=9946f31f:35414:38)
    at __require2 (chunk-AUZ3RYOM.js?v=9946f31f:18:50)
    at node_modules/@nestjs/core/router/routes-resolver.js (@nestjs_microservices.js?v=9946f31f:35606:29)
    at __require2 (chunk-AUZ3RYOM.js?v=9946f31f:18:50)

any suggestions?