ReferenceError: self is not defined

[majian159]

Expected Behavior

Actual Behavior

I encountered the following error while using the Dapr JS SDK in Next.js:

node_modules/.pnpm/[email protected]/node_modules/google-protobuf/google-protobuf.js (12:313) @ self
 ⨯ ReferenceError: self is not defined
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/google-protobuf/google-protobuf.js:97:27)
    at (rsc)/./node_modules/.pnpm/[email protected]/node_modules/google-protobuf/google-protobuf.js (/Users/majian/Source/jkzl/tutu-langchain/.next/server/vendor-chunks/[email protected]:20:1)
    at __webpack_require__ (/Users/majian/Source/jkzl/tutu-langchain/.next/server/webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/[email protected]/node_modules/google-protobuf/google/protobuf/any_pb.js:11:12)

code:

import { DaprClient } from "@dapr/dapr";
import { NextResponse, type NextRequest } from "next/server";

export async function GET(request: NextRequest) {
  const daprHost = "127.0.0.1";
  const daprPort = "3500";

  const client = new DaprClient({ daprHost, daprPort });
  const response = await client.state.save("statestore", [
    { key: "key", value: "value" },
  ]);
  console.info(response);

  return NextResponse.json({});
}

Steps to Reproduce the Problem

[shubham1172]

Hello @majian159, is this a front-end application with Next.js? You can see if it's similar #566

[majian159]

Hello @majian159, is this a front-end application with Next.js? You can see if it's similar #566

No, I solved this problem by configuring

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

export default nextConfig;

which allowed me to use DaprHttpClient in my nextjs application, but the GRPCClient still indicates it cannot connect:

== APP ==  ⨯ Error: DAPR_SIDECAR_COULD_NOT_BE_STARTED
== APP ==     at DaprClient.awaitSidecarStarted (/Users/majian/Source/jkzl/tutu-langchain/node_modules/.pnpm/@[email protected]/node_modules/@dapr/dapr/implementation/Client/DaprClient.js:164:23)
== APP ==     at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
== APP ==     at async GRPCClient._startAwaitSidecarStarted (/Users/majian/Source/jkzl/tutu-langchain/node_modules/.pnpm/@[email protected]/node_modules/@dapr/dapr/implementation/Client/GRPCClient/GRPCClient.js:157:9)
== APP ==     at async GRPCClient.start (/Users/majian/Source/jkzl/tutu-langchain/node_modules/.pnpm/@[email protected]/node_modules/@dapr/dapr/implementation/Client/GRPCClient/GRPCClient.js:166:9)
== APP ==     at async GRPCClient.getClient (/Users/majian/Source/jkzl/tutu-langchain/node_modules/.pnpm/@[email protected]/node_modules/@dapr/dapr/implementation/Client/GRPCClient/GRPCClient.js:73:13)
== APP ==     at async GRPCClientState.save (/Users/majian/Source/jkzl/tutu-langchain/node_modules/.pnpm/@[email protected]/node_modules/@dapr/dapr/implementation/Client/GRPCClient/state.js:47:24)

It appears to be a compatibility issue of grpc within the nextjs framework. I hope the dapr js sdk can be made compatible with nextjs.

[shubham1172]

which allowed me to use DaprHttpClient in my nextjs application,

That is great to know. I think the SDK's next.js users are increasing, it might be worth having a FAQ section or documentation on how to use Dapr with Next.js.

I hope the dapr js sdk can be made compatible with nextjs.

This error suspiciously looks similar to the issue I mentioned. The problem there was that next JS was running a piece of code when the Dapr sidecar was not available. You could try to run a sidecar in parallel to confirm the hypothesis. The OP of the other issue managed to make it work by putting their code under instrumentation.

[shubham1172]

Hi, we figured out the reason for the gRPC issue, it was a regression. Please see #580

[majian159]

您好，我们找到了 gRPC 问题的原因，这是一个回归。请参阅#580

Thank you very much, after updating to @dapr/dapr 3.3.1 this issue has disappeared.