CODEWITHSUNDEEP
typescriptnext.jsfile-uploadmiddlewaresaas
camden gear
camden gear

Reputation: 1

Localhost:3000 says: Failed to run middleware when using uploadthing dropbox

I'm having an issue that I can't seem to resolve. The only way I could resolve my errors in the this file was the following:

import { clerkMiddleware } from '@clerk/nextjs/server';
import { NextResponse } from 'next/server';

export default clerkMiddleware(
    (auth, req) => {
        try {
            // Ensure req.nextUrl is not undefined
            if (!req.nextUrl) {
                throw new Error('req.nextUrl is undefined');
            }

            const url = req.nextUrl;
            const searchParams = url.searchParams.toString();
            
            // Ensure req.headers is not undefined and use req.headers.get to access 'host'
            if (!req.headers || !req.headers.get) {
                throw new Error('req.headers is undefined or does not have get method');
            }

            const hostname = req.headers.get('host');
            if (!hostname) {
                throw new Error('Hostname is not present in req.headers');
            }

            const pathWithSearchParams = `${url.pathname}${searchParams.length > 0 ? `?${searchParams}` : ''}`;

            // Split and filter to get customSubDomain
            const customSubDomain = hostname.split(`${process.env.NEXT_PUBLIC_DOMAIN}`).filter(Boolean)[0];

            if (customSubDomain) {
                return NextResponse.rewrite(new URL(`/${customSubDomain}${pathWithSearchParams}`, req.url));
            }

            if (url.pathname === '/sign-in' || url.pathname === '/sign-up') {
                return NextResponse.redirect(new URL(`/agency/sign-in`, req.url));
            }

            if (url.pathname === '/' || (url.pathname === '/site' && url.host === process.env.NEXT_PUBLIC_DOMAIN)) {
                return NextResponse.rewrite(new URL('/site', req.url));
            }

            if (url.pathname.startsWith('/agency') || url.pathname.startsWith('/subaccount')) {
                return NextResponse.rewrite(new URL(`${pathWithSearchParams}`, req.url));
            }
        } catch (error) {
            console.error('Error in authMiddleware:', error.message);
            // Optionally, return a specific error response or handle it accordingly
            return NextResponse.error();
        }
    }
);

export const config = {
    matcher: ['/((?!.+\\.[\\w]+$|_next).*)', '/', '/(api|trpc)(.*)'],
};

But when I try to upload a file using uploadthing dropbox, I get the following errors:


 ℹ UPLOADTHING 9:06:21 AM  UploadThing dev server is now running!
 ⨯ UPLOADTHING 9:06:21 AM  [
 ⨯ UPLOADTHING 9:06:21 AM      "An error occured in your middleware function",
 ⨯ UPLOADTHING 9:06:21 AM      {
 ⨯ UPLOADTHING 9:06:21 AM          "message": "Failed to run middleware",
 ⨯ UPLOADTHING 9:06:21 AM          "_tag": "UploadThingError",
 ⨯ UPLOADTHING 9:06:21 AM          "name": "UploadThingError",
 ⨯ UPLOADTHING 9:06:21 AM          "code": "INTERNAL_SERVER_ERROR",
 ⨯ UPLOADTHING 9:06:21 AM          "cause": {}
 ⨯ UPLOADTHING 9:06:21 AM      }
 ⨯ UPLOADTHING 9:06:21 AM  ]
 ⨯ UPLOADTHING 9:06:21 AM  Failed to run middleware

Any ideas how to resolve this? I've tried the most recent release of @clerk/nextjs as well as clerkMiddleware and I can't seem to resolve this problem.

I feel like I've tried everything, please help me. Thanks in advance!

Upvotes: 0

Views: 103

Answers (1)

cihanolmalibu
cihanolmalibu

Reputation: 9

First of all they deprecated the authMiddleware, they want you to use clerkMiddlware as they say in docs : https://clerk.com/docs/references/nextjs/auth-middleware

Also wrap your logic into try catch blocks so we can understand the error in details. And i can suggest you that you should ensure that the req.headers and req.nextUrl is not empty or undefined and instead of referencing the header object you can use req.headers.get to get the hostname inside the object.

Upvotes: 0

Related Questions