#tRPC call in middleware crashes

1 messages · Page 1 of 1 (latest)

marble radishBOT
#

Hi @modest adder. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error you're encountering is related to using tRPC in Next.js middleware, which is not supported. Middleware in Next.js runs in an edge runtime environment, which has limitations on what can be executed.

The specific error (0 , react__WEBPACK_IMPORTED_MODULE_3__.cache) is not a function suggests that the code is trying to use React's cache function, which is not available in the edge runtime where middleware executes.

Here are a few key points to consider:

  1. Middleware limitations: Next.js middleware runs in a restricted environment that doesn't have access to the full Node.js APIs or React features NextResponse.redirect in Middleware (https://nextjs.org/docs/app/building-your-application/routing/redirecting#nextresponseredirect-in-middleware).

  2. tRPC in middleware: tRPC typically relies on React and other Node.js features that are not available in the edge runtime. Therefore, using tRPC directly in middleware is not supported.

  3. Alternative approaches: Instead of using tRPC in middleware, you might need to consider alternative ways to handle authentication and authorization. For example:

    • Use a lightweight authentication check in middleware without relying on tRPC.
    • Move the complex logic to an API route and call it from your pages/components instead of middleware.

  4. Caching issues: Some users have reported that caching can cause issues with middleware. You might want to try disabling caching for your middleware responses Github Issue Comment (https://github.com/vercel/next.js/issues/59218).

Here's a simplified example of how you might modify your middleware to avoid using tRPC:

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
#

export async function middleware(request: NextRequest) {
// Perform a simple check here, e.g., checking for a token in cookies
const token = request.cookies.get('auth_token')

if (!token) {
return NextResponse.redirect('/login?return_url=' + encodeURIComponent(request.url))
}

// You can't perform complex auth checks here, so you might need to do that in your pages/API routes

return NextResponse.next()
}

export const config = {
matcher: ['/admin', '/admin/:path*'],
}


Remember, this is a simplified example and may not cover all your authentication needs. You might need to adjust your overall authentication strategy to work within the constraints of Next.js middleware.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
#

@modest adder Kapa.ai is still learning and improving, please let me know how I did by reacting below.

#

Let me check the knowledge base for you again. Give me one moment! :books:

#

I apologize for the confusion in my previous response. You're right to point out that you're self-hosting Next.js, which changes the context of the issue. Let me provide a more accurate answer based on your situation.

Even when self-hosting Next.js, middleware still has some limitations. According to the Next.js documentation:

Middleware works self-hosted with zero configuration when deploying using next start. However, it only supports APIs compatible with the Edge runtime (https://nextjs.org/docs/app/building-your-application/deploying#middleware).

The error you're encountering ((0 , react__WEBPACK_IMPORTED_MODULE_3__.cache) is not a function) suggests that you're trying to use React's cache function in your middleware, which is not supported. This is because middleware runs in a special environment with limited APIs, even when self-hosted.

The documentation states:

Middleware uses a runtime that is a subset of all available Node.js APIs to help ensure low latency, since it may run in front of every route or asset in your application (https://nextjs.org/docs/app/building-your-application/deploying#middleware).

To resolve this issue, you have a few options:

  1. Move the complex logic (like tRPC calls) out of middleware and into a layout or Server Component where you have access to all Node.js APIs.

  2. Use headers, cookies, or query parameters to handle redirects or rewrites through next.config.js instead of middleware.

  3. If absolutely necessary, you could use a custom server, but this is generally not recommended as it can limit some Next.js features.

If you are looking to add logic (or use an external package) that requires all Node.js APIs, you might be able to move this logic to a layout as a Server Component (https://nextjs.org/docs/app/building-your-application/deploying#middleware).

#

Remember, even when self-hosting, the middleware environment is designed to be lightweight and fast, so it doesn't have access to all Node.js APIs or React features like cache.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: