Hi everyone! Does anyone here have experience using Next.js with TypeScript to connect to a gRPC backend? I’m only hosting the backend server locally for now, and I keep getting DNS errors. 😦 Any advice, ideas, or solutions would be incredibly appreciated! Thanks a ton! Here's what I'm working with:

Setup Details:
- Next.js version: 15.1.3
- gRPC-Web version: 1.5.2
- Frontend usage: Running on the browser
- Communication file: utils/api.ts connects to the gRPC server
- Proto files: .d.ts and pb.d.ts are located in proto/generated/ and were generated by protoc
- Backend server: Hosted locally at localhost:50051

The Problem:
When I run the frontend with npm run dev, I get this error:

./node_modules/@grpc/grpc-js/build/src/resolver-dns.js:20:15
Module not found: Can't resolve 'dns'
18 | exports.setup = exports.DEFAULT_PORT = void 0;
19 | const resolver_1 = require("./resolver");

20 | const dns_1 = require("dns");

| ^^^^^^^^^^^^^^
21 | const service_config_1 = require("./service-config");
22 | const constants_1 = require("./constants");
23 | const metadata_1 = require("./metadata");

Here is the snippet of api.ts file currently looks like this:

import { RPRaisingServiceClient } from "@/proto/generated/rpraising_grpc_pb";

const GRPC_SERVER_ADDRESS = "http://localhost:50051";
// Create a gRPC client
const client = new RPRaisingServiceClient(GRPC_SERVER_ADDRESS);

// GenerateRP RPC
export const generateRP = async (formData: FormData): Promise<GenerateRPResponse> => {
const request = new GenerateRPRequest();
...
return new Promise((resolve, reject) => {
client.generateRP(request, {}, (error, response) => {
if (error) {
console.error("Error in GenerateRP:", error);
reject(error);
} else {
resolve(response);
}
});
});
};