How to use @grpc/grpc-js to call an rpc service from NEXT 14 API route

[SaM-0777]

Summary

I have defined an POST route

src/api/article/route.ts

import { NextResponse } from "next/server";

export async function POST(req: Request) {
  try {
    const { content } = await req.json();
    return NextResponse.json({ content });
  } catch (error) {
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  }
}

This route is working fine But when I call a function that uses @grpc/grpc-js then when I make a request it responds with 404 Not_Found error.

Here is the code with @grpc/grpc-js

src/api/article/route.ts

import { NextResponse } from "next/server";
import { createArticle } from "@/grpc-services/article-services";

export async function POST(req: Request) {
  try {
    const { content } = await req.json();
    const result = await createArticle(content);
    return NextResponse.json({ content, result });
  } catch (error) {
    return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
  }
}

src/grpc-services/article-services.ts

import * as grpc from "@grpc/grpc-js";
import { client } from "@/grpc-client/article-client";

export async function createArticle(content: string): Promise<{ id: string }> {
  return new Promise((resolve, reject) => {
    client.createArticle(
      { content },
      (err: grpc.ServiceError | null, response: any) => {
        if (err) return reject(err);
        resolve(response);
      }
    );
  });
}

src/grpc-client/article-client

import * as grpc from "@grpc/grpc-js";
import * as protoloader from "@grpc/proto-loader";
import path from "path";

const ARTICLES_PROTO_PATH = path.resolve(__dirname, "../proto/articles.proto");

const packageDefinition = protoloader.loadSync(ARTICLES_PROTO_PATH, {
  keepCase: true,
  longs: String,
  enums: String,
  defaults: true,
  oneofs: true,
});

export const articlesProto = grpc.loadPackageDefinition(packageDefinition)
  .articles as any;

export const client = new articlesProto.ArticleService(
  "0.0.0.0:50051",
  grpc.credentials.createInsecure()
);

But when I try to make the same request from Nextjs API route then I get 404 response and there is no error logged in the console.

Additional information

No response

Example

No response

[denis23x]

Hi @SaM-0777

Maybe you made a small mistake and are requesting a POST via GET? (although in that case it should be 405)

Or wrong URL .. that's all what can cause 404 error.

[SaM-0777]

I am working in my localhost and I am using Postman to make request and I am choosing POST request to http://localhost:3000/api/article
There is not mistake in making request as I have stated in the problem itself
When I comment out the function

const result = await createArticle(content);

Then the request is successful

If I remove the comment then it I am getting 404. In between I am not modifying my url or request method or anything as such.

[icyJoseph]

So, you make the request against your Next.js Route Handlers, when it doesn't use grpc, and it works, but as soon as you import grpc, making the same request yields 404?

const ARTICLES_PROTO_PATH = path.resolve(__dirname, "../proto/articles.proto");

Here, perhaps, you want to use process.cwd().

[icyJoseph]

Or maybe a timeout in dev mode? Perhaps the modules are too large to parse? Really trying to think of extreme cases here

[SaM-0777]

Oh, There is a mis-understanding

The same error persist in build/start version as well.. What I meant by no errors or warnings is when I ran npm run build the build was successful.

In conclusion even when I do npm start and make a POST request I am still getting 404 error when I am using the grpc service only.

[icyJoseph]

Ah yeah, ok, 😌 phew...

We are short of simpler ideas now. We might have to start a proper debugging session...

One last thing would be to comment out imports and code within the grpc implementations you have made, until you get a working handler, then we'd have a good guess as to what the core issue is.

[icyJoseph]

What Node and Next.js versions have you got?

[icyJoseph]

Ok, I think I've got more literature:

• Route handler returns 404 instead of 200 #58459 (comment)

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ["@grpc/grpc-js"],
  },
};

module.exports = nextConfig;

Let's try that. Also in that thread I linked, there's some interesting explanation as to what the issue might be.

• Route handler returns 404 instead of 200 #58459 (comment)