Getting weird issue: TypeError: Cannot read properties of undefined (reading 'query')

[beingsaumyadeep]

Summary

I am using Vercel to host but am getting TypeError: Cannot read properties of undefined (reading 'query')

TypeError: Cannot read properties of undefined (reading 'query')
    at new rv (.next/server/chunks/747.js:23:37314)
    at rE.createSession (.next/server/chunks/747.js:23:38354)
    at rT (.next/server/chunks/747.js:23:40257)
    at rA (.next/server/chunks/747.js:23:40557)
    at 48891 (.next/server/app/api/upload/signed-url/route.js:43:6345)
    at t (.next/server/webpack-runtime.js:1:128)
    at 32482 (.next/server/app/api/upload/signed-url/route.js:43:5326)
    at t (.next/server/webpack-runtime.js:1:128)
    at 18614 (.next/server/app/api/upload/signed-url/route.js:43:3632)
    at t (.next/server/webpack-runtime.js:1:128)

> Build error occurred
[Error: Failed to collect page data for /api/upload/signed-url] {
  type: 'Error'
}
Error: Command "npm run build" exited with 1

Additional information

My code: /app/api/upload/signed-url/route.ts

import { NextRequest, NextResponse } from "next/server";
import { v4 as uuidv4 } from "uuid";
import { getSignedUploadUrl } from "@/lib/s3";
import { cookies } from "next/headers";
import { getSession } from "@/lib/session";

export async function POST(request: NextRequest) {
  try {
    const cookie = await cookies();
    const sessionToken = cookie.get("session_token")?.value;

    if (!sessionToken) {
      return NextResponse.json(
        { success: false, message: "Unauthorized" },
        { status: 401 }
      );
    }

    const session = await getSession();
    if (!session) {
      return NextResponse.json(
        { success: false, message: "Unauthorized" },
        { status: 401 }
      );
    }

    const user = session.user;
    if (!user) {
      return NextResponse.json(
        { success: false, message: "Unauthorized" },
        { status: 401 }
      );
    }

    const { id: userId } = user;

    const data = await request.json();
    const { fileType, type } = data;

    if (!fileType) {
      return NextResponse.json(
        { success: false, message: "File type is required" },
        { status: 400 }
      );
    }

    const fileName = `${uuidv4()}.${fileType.split("/")[1] || "file"}`;

    const folder = type === "avatar" ? "avatars" : "featured";

    const filePath = `${folder}/${userId}/${fileName}`;

    const { signedUrl, fileUrl } = await getSignedUploadUrl(filePath, fileType);

    return NextResponse.json({
      success: true,
      signedUrl,
      fileUrl,
      key: filePath
    });
  } catch (error) {
    console.error("Error generating signed URL:", error);
    return NextResponse.json(
      { success: false, message: "Failed to generate signed URL" },
      { status: 500 }
    );
  }
}

[icyJoseph]

What does the getSession function do? Is there a createSession involved?

Feels like it is trying to run some code at build time... 🤔

[beingsaumyadeep]

[slug]/page.tsx

export default async function Page({ params }: Props) {
  const { slug } = await params;
  const user = await getUsers(slug);
  const currentUser = await getCurrentUser();

  // If user not found, show 404 page
  if (!user) {
    notFound();
  }

  // Check if the page is in edit mode
  // const isEditMode = true;

  // Check if the current user is the profile owner
  const isOwner = currentUser?.username === user.username;

  // Only allow edit mode if the user is the owner of the profile
  const canEdit = isOwner;

  return (
    <div className=" bg-cover bg-center">
{/* Here PageUI is client side code */}
      <Profile
        user={user}
        isEditable={canEdit}
        isLoggedIn={!!currentUser}
        isOwner={isOwner}
      />
    </div>
  );
}

[icyJoseph]

Interesting, this is another route too right? I have seen people failing to deploy to Vercel for very odd reasons these past days...

Since you have been stuck at this for a bit, would it make sense to remove routes, until a build passes, to figure out which route is causing the problem? Or rather, what code/library/import is causing the breakage.

[beingsaumyadeep]

Same thing I am facing in Cloudflare pages depolyment, though there this issues were coming up for /api/ routes. After removing APIs routes and moving to server side code, now ending up with runtime with "edge" warning. Even if I add export const runtime = "edge"; the whole build fails with wried NodeJS import errors

Here are logs from Cloudflare pages

 

17:12:11.507 | ⚡️ ERROR: Failed to produce a Cloudflare Pages build from the project.
17:12:11.507 | ⚡️
17:12:11.507 | ⚡️ The following routes were not configured to run with the Edge Runtime:
17:12:11.507 | ⚡️ - /[slug]/analytics
17:12:11.507 | ⚡️ - /[slug]/settings
17:12:11.507 | ⚡️ - /[slug]
17:12:11.507 | ⚡️ - /api/fetchWebsite
17:12:11.507 | ⚡️ - /api/upload/signed-url
17:12:11.508 | ⚡️ - /auth/callback/google
17:12:11.508 | ⚡️ - /auth/forgot
17:12:11.508 | ⚡️ - /auth/login
17:12:11.508 | ⚡️ - /auth/register
17:12:11.508 | ⚡️ - /index
17:12:11.508 | ⚡️ - /privacy
17:12:11.508 | ⚡️ - /support
17:12:11.508 | ⚡️ - /terms
17:12:11.508 | ⚡️
17:12:11.508 | ⚡️ Please make sure that all your non-static routes export the following edge runtime route segment config:
17:12:11.509 | ⚡️ export const runtime = 'edge';
17:12:11.509 | ⚡️
17:12:11.509 | ⚡️ You can read more about the Edge Runtime on the Next.js documentation:
17:12:11.509 | ⚡️ https://nextjs.org/docs/app/building-your-application/rendering/edge-and-nodejs-runtimes
17:12:11.509 |  
 

[beingsaumyadeep]

Weird part is, build works all good in local without any warnings or errors. This is just happening on deployment

[icyJoseph]

Same Node/bun versions locally, and on deployment right?

The hosting infra also does some setup, to support a given framework, see for example, https://www.netlify.com/blog/how-we-run-nextjs/

Some assumption is not working out when preparing to host... 🤔