How to connect a docker-run Go gRPC server to a React app?

[altjimmy]

My first time here, doing a college project, have almost 0 experience with gRPC and web dev in general, so any advice is very much appreciated and please be patient with me.

The situation is: me and my classmate are building a web-module for loyalty service, i am making a client side, and he's working on server with Go and gRPC. I am using React and JS.

My classmate sent me a folder with all the files for the server, i did the docker-compose up, and it is running on my 44044 port.
In my react app i generated two .js files from .proto file, ServiceLoyalty_pb.js and ServiceLoyalty_grpc_web_pb.js, they're stored in my src/generated folder.

But when i try to import it in my Page.jsx file (import { LoyaltyServiceClient } from '../../generated/ServiceLoyalty_grpc_web_pb';), the browser returns this:
Uncaught SyntaxError: The requested module http://localhost:5173/src/generated/ServiceLoyalty_grpc_web_pb.js doesn't provide an export named: 'LoyaltyServiceClient' Operations.jsx:20:10

I checked the ServiceLoyaltyServiceLoyalty_grpc_web_pb,js file, it seems to be ok, but still my .jsx page refuses to see it and import it.
Still, when hovering over the import, it seems to recognize it correctly

What am i missing? Thank you in advance.

[sampajano]

@altjimmy Hi thanks for reaching out!

Could you provide the content of ServiceLoyalty_grpc_web_pb.js file (e.g. maybe in github gist)?

Also, what is the command you used for generating the file?

You should see a line like this at the bottom of the generated file, where the exported object should contain LoyaltyServiceClient in it's scope:

module.exports = your.package.name;

---

You could also check out our echo demo and the dockerfile it used as an example for how it can work.

---

Hope it helps :)