Generate grpc-web code that use import than require

[yingshaoxo]

I see if I use vite, the whole package won't work

It will show the error, it says: require is not defined

---

https://vitejs.dev

[Krzysztof-Dziardziel]

Having the same error. Did you manage to resolve it?

[Krzysztof-Dziardziel]

Can you share a command You're using to generate stubs?

When I'm using
protoc \ --plugin="protoc-gen-ts=${PROTOC_GEN_TS_PATH}" \ --js_out="import_style=commonjs,binary:${GENERATED_DIR}" \ --ts_out="service=grpc-web:${GENERATED_DIR}" \\ --proto_path="./proto" \ ${protoFilesPaths}
I get Uncaught SyntaxError: The requested module '/generated/service_pb_service.js' does not provide an export named 'MessengerClient' (at App.vue:3:1) error.

When I'm using
protoc \ --plugin="protoc-gen-ts=${PROTOC_GEN_TS_PATH}" \ --js_out="import_style=commonjs,binary:${GENERATED_DIR}" \ --grpc-web_out=import_style=typescript,mode=grpcwebtext:${GENERATED_DIR} \\ --proto_path="./proto" \ ${protoFilesPaths}
I get Uncaught ReferenceError: require is not defined at service_pb.js:14:12 - similar to you.

I've been bouncing between those two errors some time now and I can't figure any solution out.

[yingshaoxo]

Having the same error. Did you manage to resolve it?

Use other stuff, for example, vue-cli.

But that's not a perfect solution.

Upgrade this package is the perfect solution.

[Krzysztof-Dziardziel]

@yingshaoxo Temporary solution would be to change the import types in the generated structures:
var (\w+) = require\(([\w'\.\/-]+)\) => import $1 from $2.

Unfortunately this takes me back to the first error: Uncaught SyntaxError: The requested module '/generated/models_pb.js' does not provide an export named 'default' (at events_pb.js:32:8)

[Krzysztof-Dziardziel]

This lib seems not to be working with Vite at all. If You want to develop using Vite and gRPC, use https://github.com/timostamm/protobuf-ts. Works wonderful with Vite.