N
Neon•2y ago
foreign-sapphire

Troubleshooting WebSocket Package Error in Next.js App with Clerk.dev Auth

Hello, I'm facing an issue in my Next.js application (version 14.2.3) with App Router, where I've implemented a protected route at /agency using Clerk.dev for authentication. Upon executing a Server Action, which is the initial operation in my /agency file, I encounter a TypeError related to the WebSocket package. Below are pictures of the error messages from both the server console and the client browser. Here are the relevant code snippets and package versions: /agency Route Code: 
const page = async () => {
  // check if user has an invitation
  const agencyId = await verifyAndAcceptInvitation();
}
const page = async () => {
  // check if user has an invitation
  const agencyId = await verifyAndAcceptInvitation();
}
Server Action Code: 
// This function is used to verify and accept an invitation
export const verifyAndAcceptInvitation = async () => {
  let user;
  const { userId } = auth(); // This is from Clerk
  if (!userId) return redirect("/signin");

  user = await clerkClient.users.getUser(userId);
  if (!user) return redirect("/signin");

// The problem is with the db call. I'm using Prisma ORM btw.
  const invitationExists = await db.invitation.findUnique({
    where: {
      email: user.emailAddresses[0].emailAddress,
      status: "PENDING",
    },
  });
// This function is used to verify and accept an invitation
export const verifyAndAcceptInvitation = async () => {
  let user;
  const { userId } = auth(); // This is from Clerk
  if (!userId) return redirect("/signin");

  user = await clerkClient.users.getUser(userId);
  if (!user) return redirect("/signin");

// The problem is with the db call. I'm using Prisma ORM btw.
  const invitationExists = await db.invitation.findUnique({
    where: {
      email: user.emailAddresses[0].emailAddress,
      status: "PENDING",
    },
  });
db.ts file is the first photo, I running out of characters. package.json file: 
"dependencies": {
  "@clerk/nextjs": "^4.30.1",
  "@clerk/themes": "^1.7.12",
  "@clerk/types": "^4.2.1",
  "@neondatabase/serverless": "^0.9.3",
  "@prisma/adapter-neon": "^5.13.0", 
  "@prisma/client": "^5.13.0",
  "dotenv": "^16.4.5",
  "next": "14.2.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "ws": "^8.17.0",},
"devDependencies": {
  "@types/node": "^20.12.7",
  "@types/react": "^18.2.79",
  "@types/react-dom": "^18.2.25",
  "@types/ws": "^8.5.10",
  "prisma": "^5.13.0",}
"dependencies": {
  "@clerk/nextjs": "^4.30.1",
  "@clerk/themes": "^1.7.12",
  "@clerk/types": "^4.2.1",
  "@neondatabase/serverless": "^0.9.3",
  "@prisma/adapter-neon": "^5.13.0", 
  "@prisma/client": "^5.13.0",
  "dotenv": "^16.4.5",
  "next": "14.2.3",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "ws": "^8.17.0",},
"devDependencies": {
  "@types/node": "^20.12.7",
  "@types/react": "^18.2.79",
  "@types/react-dom": "^18.2.25",
  "@types/ws": "^8.5.10",
  "prisma": "^5.13.0",}
I would be grateful for any guidance on resolving these errors. If you need further details or additional code snippets, please let me know. Even if you need a reproduction I don't know exactly but I do it Thank you!
No description
No description
No description
3 Replies
foreign-sapphire
foreign-sapphireOP•2y ago
I consider myself as a junior developer so any comment or guidance is welcome here. I also want to say I'm using Node.js version: v20.10.0 with PNPM as a Node Version Manager and Package Manager, the version of PNPM is 9.1.0. Also I'm deploying this on Vercel and This is my PC..
No description
foreign-sapphire
foreign-sapphire•2y ago
Searching that error brings me to https://github.com/websockets/ws/issues/2057. My guess is that you need to include "bufferutil": "4" as a peer dependency
GitHub
Issues · websockets/ws
Simple to use, blazing fast and thoroughly tested WebSocket client and server for Node.js - Issues · websockets/ws
foreign-sapphire
foreign-sapphireOP•2y ago
Thanks a lot for your time, I'm going to test it and let you know.. Oh my gosh, it works!!! Thank you so much once again. It's funny, I was stuck on that issue, not knowing what to do because I'm using the package, and I wasn't familiar with the peerDependencies in the package.json file or their significance. Your help has been invaluable!

Did you find this page helpful?