"ReferenceError: process is not defined" trying to load grpc package with proto-loader and grpc-js in vue component

Question

I have a typescript Vue.js component and I need it to make a grpc call.

My proto file is in the example: https://github.com/floydjones1/ts-node-grpc/blob/main/proto/random.proto

component.vue:

<script setup lang="ts">
import path from 'path'
import { ref } from "vue";
import * as grpcJs from "@grpc/grpc-js";
import * as protoLoader from "@grpc/proto-loader";
import type { ProtoGrpcType } from "./proto/random";

const PROTO_FILE = './proto/random.proto'
const packageDefinition = protoLoader.loadSync(path.resolve(__dirname, PROTO_FILE))
const grpcObject = (grpcJs.loadPackageDefinition(packageDefinition) as unknown) as ProtoGrpcType
</script>

As soon as I run a page with this component I have:

ReferenceError: process is not defined
    node_modules grpc/grpc-js/build/src/logging.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:79
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    node_modules grpc/grpc-js/build/src/metadata.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:185
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    node_modules grpc/grpc-js/build/src/call-credentials.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:410
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    node_modules grpc/grpc-js/build/src/index.js@http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:9983
    __require http://localhost:5173/node_modules/.vite/deps/chunk-RSJERJUL.js?v=ed969e6f:3
    <anonymous> http://localhost:5173/node_modules/.vite/deps/@grpc_grpc-js.js?v=ed969e6f:10144

If I run it outside of Vue.js it works. Any idea what do I need to do?

Answer 1

I discovered the problem is that, grpc-js is intended to run in backend side and do not support browser environment. On the other side, vue.js component run on the browser.

A solution then is to drop grpc-js and use grpc-web. A second option is to drop grpc-js and instead use protobuf-ts/plugin that can be used with @protobuf-ts/grpcweb-transport since they also support browser environment. In fact, grpc-web still have some problems such as https://github.com/grpc/grpc-web/issues/1242.