Import not found in VueJS/TypeScript with gRPC-Web

Question

I've created a simple VueJS application and am trying to implement a example for a file upload.

I am using the following proto file:

syntax = "proto3";

message File {
  bytes content = 1;
}

message MetaData {
  string name = 1;
  string type = 2;
}

message FileUploadRequest {
  oneof request {
    MetaData metadata = 1;
    File file = 2;
  }
}

enum Status {
  PENDING = 0;
  IN_PROGRESS = 1;
  SUCCESS = 2;
  FAILED = 3;
}

message FileUploadResponse {
  string name = 1;
  Status status = 2;
}

service FileUploadService {
  rpc upload(stream FileUploadRequest) returns(FileUploadResponse);
}

First I generate the client stub:

protoc -I=${DIR:-./api/} fileUpload.proto \
   --js_out=import_style=commonjs,binary:${OUT_DIR:-./api} \
   --grpc-web_out=import_style=typescript,mode=grpcwebtext:${OUT_DIR:-./api}

Which generates three files in the api directory:

├── api
│   ├── FileUploadServiceClientPb.ts
│   ├── fileUpload_pb.d.ts
|   ├── fileUpload.proto
│   └── fileUpload_pb.js
└── src
    ├── App.vue
    └── main
        ├── services
        │   └── fileService.ts
        └── views

I am now trying to implement the generated client code in the FileService:

import { FileUploadServiceClient } from '../../../api/FileUploadServiceClientPb';
import { FileUploadRequest, FileUploadResponse, MetaData } from '../../../api/fileUpload_pb';

export default class FileService {

    constructor(readonly fileUploadClient: FileUploadServiceClient) { }

    uploadFile(file: File): Promise<FileUploadResponse | null> {
        ...
        this.fileUploadClient.upload(request, {}, (err, response) => {
        ...
        }
        ...
    }
}

The following two problems occur

import of messages and types does not seem to work, Uncaught SyntaxError: import not found: MetaData.
import of FileUploadServiceClient works but it does not recognize the upload method.

I am using libprotoc 3.20.1 and protoc-gen-grpc-web 1.3.1

I have already googled a bit but did not find a solution that could help me:

Different configurations of import_style and mode for grpc-web_out unfortunately did not solve the problem either. By the way, generating the server-side code in a quarkus application works exactly as it should.

score 0 · Answer 1 · answered May 31 '22 at 13:20

0

I also did not had success using the protoc-gen-grpc-web plugin. The protobuf-ts plugin was much nicer to use and actually worked: https://github.com/timostamm/protobuf-ts/blob/master/MANUAL.md (This is a link to their manual.)

The packages I used were:

@protobuf-ts/runtime
@protobuf-ts/plugin (I am pretty sure this can be a dev dependency)
@protobuf-ts/grpcweb-transport (for creating the transport object used to create the client)

answered May 31 '22 at 13:20

Ben Müker

31
5

Thanks for the recommendation, I'm still a bit overwhelmed by all the different libraries available. I am honestly wondering if gRPC-Web is already production ready for enterprise applications. I also tried the latest version of protobuf 21.x with protobuf-javascript, that doesn't seem to work at all. – nLang Jun 01 '22 at 02:54

Import not found in VueJS/TypeScript with gRPC-Web

1 Answers1