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

[staticdev]

I have a typescript 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?

[baiwusanyu-c]

The components of vue are rendered in the browser by default, so when using vite to build the application, the default environment is the browser, you should not build the node api into the browser environment code

[staticdev]

@baiwusanyu-c I need exactly that the browser renders the vue.js component that calls the a grpc backend. How should then I build the code so that I do not have this problem? Does this means also I should not use proto-loader on browser side?