grpc-web not working in a Vite+Typescript app

[loicmagne]

I used protoc -I=. protos/*.proto --js_out=import_style=commonjs,binary:grpcproto_web/ --grpc-web_out=import_style=typescript,mode=grpcweb:grpcproto_web/ to generate my proto file.

Then whenever I try to import proto objects like import { LoginRequest } from '../protos/login_pb'; I get errors Uncaught SyntaxError: import not found: LoginRequest.

I looked at issues #535 or vite#3898 but nothing works.

Does anyone have a working example using Vite+Typescript with grpc-web ?

[Krzysztof-Dziardziel]

I'm having the same issue. Sadly, I couldn't get it to work. I also wasn't able to get Vite+JS to work. Looks like this is some issue with how Vite loads external resources. 😞

[Krzysztof-Dziardziel]

@loicmagne You can use @protobuf-ts and protoc --ts_out ./generated --proto_path "./proto" <protoFilesPaths> command. It works fine with Vite.

[lbensaad]

@Krzysztof-Dziardziel Could you please tell us how you configured protobuf-ts and grpc-web to work with vite?

[FredrikMeyer]

@lbensaad I think the suggestion of @Krzysztof-Dziardziel is to replace grpc-web with protobuf-ts. That's what we did at my job (and it works wonderfully - the objects are much easier to work with, they are just regular JS objects)

[wirekang]

@loicmagne You can use @protobuf-ts and protoc --ts_out ./generated --proto_path "./proto" <protoFilesPaths> command. It works fine with Vite.

This is best answer. We replace grpc-web with protobuf-ts, and every problem have been solved.

[lbensaad]

Thanks @FredrikMeyer, I read it above, but I thought that protobuf-ts is only for messages and must use grpc-web for RPC. Now I also use protobuf-ts for RPC and works perfectly. The key word is replace. Thanks again for mentioning it.

[barrelful]

@sampajano is there any plan to fix grpc-web? I just used the command from the README.md for TypeScript:

protoc -I=$DIR echo.proto \
  --js_out=import_style=commonjs,binary:$OUT_DIR \
  --grpc-web_out=import_style=typescript,mode=grpcweb:$OUT_DIR

But I don't get generated the promissed _grpc_web_pb.ts file. Instead it generates a Pb file with some require('google-protobuf') which will not work on browser environment.

[staticdev]

@lbensaad @FredrikMeyer when replacing gprc-web with protobuf-ts are you using @protobuf-ts/grpcweb-transport? Did you manage do receive a stream with it?

I am having Not Found error for POST http://localhost:5173/0.0.0.0:8080/my_proto.Haberdashery/MakeRowOfHats the example below:

service Haberdashery {
    rpc MakeRowOfHats (Size) returns (stream Hat);
}

[sampajano]

@sampajano is there any plan to fix grpc-web? I just used the command from the README.md for TypeScript:

protoc -I=$DIR echo.proto \
  --js_out=import_style=commonjs,binary:$OUT_DIR \
  --grpc-web_out=import_style=typescript,mode=grpcweb:$OUT_DIR

But I don't get generated the promissed _grpc_web_pb.ts file. Instead it generates a Pb file with some require('google-protobuf') which will not work on browser environment.

@barrelful Thanks for reporting the issue!

FYI the documentation was wrong. There is a generated TS file but with a different name than what's documented. :)

I've fixed it in #1314 above. Let me know there's more blocking issues for you. Thanks!

[barrelful]

@sampajano thanks, actually the rest of the documentation including the example do not work.

import {EchoServiceClient} from './echo_grpc_web_pb';

Should be then

import {EchoServiceClient} from './EchoServiceClientPb';

But also, there is a problem since when I run it in the browser I get the error: SyntaxError: import not found: EchoRequest (exactly same problem mentioned above).

Also the ts-example/client.ts does not match the documented code on README.md so it cannot be a full version of it.

[staticdev]

@barrelful this makes this lib unusable by me, once it is fixed I will try again.

[sampajano]

@barrelful Thanks for pointing out the typo, will fix the documentation. :)

But also, there is a problem since when I run it in the browser I get the error: SyntaxError: import not found: EchoRequest (exactly same problem mentioned above).

Also the ts-example/client.ts does not match the documented code on README.md so it cannot be a full version of it.

I'm guessing that you could be missing a webpack step as we usually intend to have. Please see the below steps for more details on how to run ts-example/client.ts.

---

@barrelful @staticdev The Typescript example works for me using the new instructions added below:

https://github.com/grpc/grpc-web/tree/master/net/grpc/gateway/examples/echo/ts-example/README.md

Please let me know if the above works for you and if you run into any issues.

Thanks!