I am trying use grpc-web client in my vue application as follows:

import Vue from "vue"; import App from "./App.vue"; const { Registration, _ } = require("./identity-service_pb.js"); const { IdentityServicePromiseClient } = require("./identity-service_grpc_web_pb.js"); const identityService = new IdentityServicePromiseClient( "http://localhost:9000" ); const req = new Registration(); req.setGender("male"); req.setInterestList(["A", "B", "C"]); console.log(req); console.log(identityService); identityService.signUp(req, {}).then(function(response) { console.log(response); }).catch(function(error) { console.error(error); }); Vue.config.productionTip = false; new Vue({ render: h => h(App) }).$mount("#app");

When the app gets compiled, the compiler complains:

error in ./src/identity-service_pb.js Module Error (from ./node_modules/eslint-loader/index.js): /home/developer/js/identity-client/src/identity-service_pb.js 27:1 error 'proto' is not defined no-undef 28:50 error 'proto' is not defined no-undef 30:15 error 'proto' is not defined no-undef 31:20 error 'COMPILED' is not defined no-undef 36:3 error 'proto' is not defined no-undef 48:1 error 'proto' is not defined no-undef 51:15 error 'proto' is not defined no-undef 52:20 error 'COMPILED' is not defined no-undef 57:3 error 'proto' is not defined no-undef 65:1 error 'proto' is not defined no-undef 82:1 error 'proto' is not defined no-undef 83:10 error 'proto' is not defined no-undef 96:1 error 'proto' is not defined no-undef 115:1 error 'proto' is not defined no-undef 117:17 error 'proto' is not defined no-undef 118:10 error 'proto' is not defined no-undef 129:1 error 'proto' is not defined no-undef 141:11 error 'value' is already defined no-redeclare 157:1 error 'proto' is not defined no-undef 159:3 error 'proto' is not defined no-undef 171:1 error 'proto' is not defined no-undef 194:1 error 'proto' is not defined no-undef 203:1 error 'proto' is not defined no-undef 212:1 error 'proto' is not defined no-undef 221:1 error 'proto' is not defined no-undef 231:1 error 'proto' is not defined no-undef 240:1 error 'proto' is not defined no-undef 261:1 error 'proto' is not defined no-undef 262:10 error 'proto' is not defined no-undef 275:1 error 'proto' is not defined no-undef 278:34 error 'proto' is not defined no-undef 294:1 error 'proto' is not defined no-undef 296:17 error 'proto' is not defined no-undef 297:10 error 'proto' is not defined no-undef 308:1 error 'proto' is not defined no-undef 320:11 error 'value' is already defined no-redeclare 320:23 error 'proto' is not defined no-undef 321:32 error 'proto' is not defined no-undef 337:1 error 'proto' is not defined no-undef 339:3 error 'proto' is not defined no-undef 351:1 error 'proto' is not defined no-undef 365:7 error 'proto' is not defined no-undef 375:1 error 'proto' is not defined no-undef 384:1 error 'proto' is not defined no-undef 393:1 error 'proto' is not defined no-undef 395:40 error 'proto' is not defined no-undef 403:1 error 'proto' is not defined no-undef 412:1 error 'proto' is not defined no-undef 421:1 error 'proto' is not defined no-undef 426:29 error 'proto' is not defined no-undef ✖ 50 problems (50 errors, 0 warnings)

As you can see, that the compiler complains about the auto generated file identity-service_pb.js .

The file structure looks as follows:

What am I doing wrong?

Update

Do I need an envoy proxy between vue app and golang app?

Or vue app can communicate directly with golang app? At the moment, I do not have envoy proxy between them.