Facing Nextjs Relative URL Issues in Next.js Middleware with tRPC on Edge Runtime (Cloudflare)

[nguyenkhavi]

Preliminary Checks

• I have reviewed the documentation: https://clerk.com/docs

• I have searched for existing issues: https://github.com/clerk/javascript/issues

• I have not already reached out to Clerk support via email or Discord (if you have, no need to open an issue here)

• This issue is not a question, general help request, or anything other than a bug report directly related to Clerk. Please ask questions in our Discord community: https://clerk.com/discord.

Publishable key

pk_test_Z29yZ2VvdXMtZHJ1bS0xNC5jbGVyay5hY2NvdW50cy5kZXYk

Description

Steps to reproduce:

1. Middleware Setup

const isPublicRoute = createRouteMatcher(['/sign-in(.*)']);
export default clerkMiddleware((auth, request) => {
  if (!isPublicRoute(request)) {
    auth().protect();
  }
  const requestHeaders = new Headers(request.headers);
  const pathname = new URL(request.url).pathname;

  requestHeaders.set('x-pathname', pathname);
  const response = NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
  return response;
});

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

2. Creating TRPC Server-Side Calls:

export const createCallerFactory = t.createCallerFactory;
export const createCaller = createCallerFactory(appRouter);

export const createQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: {
        // With SSR, we usually want to set some default staleTime
        // above 0 to avoid refetching immediately on the client
        staleTime: 30 * 1000,
      },
      dehydrate: {
        serializeData: SuperJSON.serialize,
        shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
      },
      hydrate: {
        deserializeData: SuperJSON.deserialize,
      },
    },
  });

const createContext = async () => {
  const heads = new Headers(headers());
  const user = await currentUser();

  return {
    auth: getAuth(new NextRequest(heads.get('host') ?? '', { headers: heads })),
  };
};
const getQueryClient = createQueryClient;
const caller = createCaller(createContext);

export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(caller, getQueryClient);

4. Calling tRPC in a Server Component:

import { api } from '@/trpc/server';

export const runtime = 'edge';

export default async function Layout({ children }: PropsWithChildren) {
  const pathname = headers().get('x-pathname') ?? '/';
  const pendingCourses = await api.course.pendingCourses();

 return null
}

Expected behavior:

I expect to retrieve the pendingBookings from the server component when running on Cloudflare's edge runtime.

Actual behavior:

The following error is encountered:
Error: URL is malformed \"....pages.dev\". Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls

Environment

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M2
    Memory: 819.66 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    pnpm: 9.9.0 - ~/.nvm/versions/node/v20.17.0/bin/pnpm
    bun: 1.1.26 - ~/Documents/stay-vacani/stay-vacani-mono/node_modules/.bin/bun
    Watchman: 2024.05.06.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 128.1.69.162
    Chrome: 128.0.6613.120
    Safari: 17.3.1
  npmPackages:
    @cloudflare/next-on-pages: 1.13.2 => 1.13.2
    @cloudflare/workers-types: 4.20240815.0 => 4.20240815.0
    @tanstack/react-query: 5.51.24 => 5.51.24
    @trpc/client: next => 11.0.0-rc.502+2a8c56027
    @trpc/react-query: next => 11.0.0-rc.502+2a8c56027
    @trpc/server: next => 11.0.0-rc.502+2a8c56027
    next: 14.2.5 => 14.2.5
    react: 18.3.1 => 18.3.1
    react-dom: 18.2.0 => 18.2.0
    superjson: 2.2.1 => 2.2.1
    typescript: 5.5.4 => 5.5.4
    @clerk/nextjs: 5.3.4 => 5.3.4