VueJS + Grpc-Web "Module not found: Error: Can't resolve"

I’ve created a fresh VueJS application with TypeScript functionality.

When I generate using:

protoc -I=. service.proto --js_out=import_style=typescript:. --grpc web_out=import_style=typescript,mode=grpcwebtext:.

I get the following files:

When I move them to src/_protos in my VueJS project and try to import { PlatformClient } from '@/_protos/ServiceServiceClientPb'; it gives me the following error:

Failed to compile.
./src/_protos/ServiceServiceClientPb.ts
Module not found: Error: Can't resolve './service_pb' in '/Users/theobouwman/dev/woodyshousing/woody_web/src/_protos'

Why is this?

[eberkund]

@stanley-cheung what do you mean with “You need to use the former.”?

The --js_out parameter doesn’t support typescript so what you actually want is:

protoc -I=. service.proto --js_out=import_style=commonjs:. --grpc web_out=import_style=typescript,mode=grpcwebtext:.

See: https://github.com/grpc/grpc-web/issues/411

[stanley-cheung]

--js_out=import_style=typescript:.: this doesn’t work. The message part of the .proto generated by protoc --js_out= only supports import_style=commonjs or import_style=closure. You need to use the former.

--grpc-web_out=import_style=typescript will output a minimal set of typings for the messages in a .d.ts file.