The server on Localhost:3000 encountered an issue with a middleware error while attempting to utilize the upload feature with Dropbox

I've encountered an issue that I'm struggling to fix. The only solution I found for resolving errors in this file was the following:

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

export default clerkMiddleware(
    (auth, req) => {
        try {
            // Code logic here...
        } catch (error) {
            console.error('Error in authMiddleware:', error.message);
            // Handle error response
            return NextResponse.error();
        }
    }
);

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

However, when attempting to upload a file using UploadThing Dropbox, I encountered 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 suggestions on how to tackle this? I've tried the latest version of @clerk/nextjs and clerkMiddleware without success.

Feeling like I've exhausted all options, any assistance would be greatly appreciated. Thank you in advance!

Answer №1

Initially, they deprecated the authMiddleware and recommended using clerkMiddlware instead. More information can be found in the documentation:

Furthermore, it is advised to encapsulate your logic within try-catch blocks for comprehensive error handling. Additionally, ensure that req.headers and req.nextUrl are neither empty nor undefined. To retrieve the hostname from the object, consider utilizing req.headers.get instead of referencing the header object directly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular is experiencing a glitch with updating user profiles

Currently, I am working with Angular and spring-boot. I am facing an issue while attempting to update user details from the settings page. When I click on the update button, nothing happens. Can someone please assist me in identifying where the problem lie ...

Developing Angular dynamic components recursively can enhance the flexibility and inter

My goal is to construct a flexible component based on a Config. This component will parse the config recursively and generate the necessary components. However, an issue arises where the ngAfterViewInit() method is only being called twice. @Component({ ...

"Utilizing the power of Angular 6's JSON pipe

Looking for a well-structured formatted JSON, but all I get is confusion and this strange image: https://i.sstatic.net/6mvBu.png Does anyone have any insights on what might be causing the issue? HTML <span style="font-weight: 500;">Payload Data: ...

What is the ideal timing to incorporate an error handler in an Observable?

I find myself uncertain about the best practices for error handling in general. For instance, if I'm already handling errors in my service using catchError, is it necessary to also include an error handler in my subscription? Here's an example o ...

"Error encountered when attempting to upload directory due to file size

Utilizing the webkit directory to upload a folder on the server has been successful, however, an issue arises when there are more than 20 files in the folder. In this scenario, only the first 20 files get uploaded. The PHP code used for uploading the fold ...

Adding the unzip feature is not within my capabilities

I am a novice Japanese web developer. Unfortunately, my English skills are not great. I apologize for any inconvenience. I am interested in utilizing this specific module: https://www.npmjs.com/package/unzip To do so, I executed the following commands ...

Having trouble understanding why getStaticProps function is not loading before the main exported function

When I use npm run dev to troubleshoot this issue, it utilizes getStaticProps to process various d3 properties before injecting them into the main output function during runtime. However, it seems that getStaticProps is not running as expected - a consol ...

Exploring Tailwind's flexibility with custom color schemes

I'm attempting to generate unique hex colors for my React/TypeScript application with Tailwind. Why isn't the background color updating based on the color variable value? Check out my code snippet below: import React, { useState } from &apo ...

Swift error: missing mandatory 'file' request component

I'm currently facing an issue while attempting to upload a profile image to the server using multipart file upload. Here's my code: func uploadPhoto(image: UIImage, filePath: String, completion: @escaping uploadPhotoClosure) { let imageD ...

BoostDock, execute tasks exclusively in select workspaces

Here is the breakdown of my workspaces: apps web-1 (next) web-2 (next) web-3 (next) packages pack-1 (ui) pack-2 (react utils) pack-3 (node utils) services service-1 (express) service-2 (express) service-3 (express) service-4 (express) I am looking ...

Error in ReactJS VSCode while integrating Cypress testing: The name 'cy' cannot be found

Currently working on a ReactJS Typescript project using NPM and VSCode. Despite all my Cypress tests running smoothly, I am encountering a syntax error in VSCode: Error: Cannot find name 'cy' Any ideas on how to resolve this issue? https://i.ss ...

Using ts-jest for mocking internal modules

Within my .ts module, I have the following code: import client from './client'; export default class DefaultRequest implements IRequest { make(req: Request): Promise<Response> { return new Promise<Response>((resolve, reje ...

Issues with NativeScript WebView displaying HTML file

Having trouble loading a local HTML file into a webview in my NativeScript (typescript) application. Despite using the correct path, it's not loading and instead shows an error. <WebView src="~/assets/content.html" /> An error message stati ...

Exploring Angular's Dynamic Filtering Capabilities with Typescript

I need to incorporate filtering into typescript, allowing for a dynamic column parameter that can be utilized in various scenarios. This is my responsibility. addToList(selectedItems: any, list: any) { const data = []; for (const selection of sele ...

In ReactJS, the way to submit a form using OnChange is by utilizing the

Is there a way to submit a form using Onchange without a button? I need to fire the form but can't insert routes as it's a component for multiple clients. My project is built using react hook forms. const handleChange = (e: any) => { c ...

Strategies for defining a ReactNode with optional props

I've been struggling for a while now trying to solve this issue without any success. I have a component that accepts two child nodes in the following structure: <SharedTwoColumns outer={{ className: "mt4 mb4" }} gap={<div className ...

What is the best way to retrieve an object within a class?

Exploring a Class Structure: export class LayerEditor { public layerManager: LayerManager; public commandManager: CommandManager; public tools: EditorTools; constructor() { this.commandManager = new CommandManager(); this.lay ...

Issue encountered while attempting to package Azure project in Visual Studio 2015 Update1 due to difficulty copying Typescript files

Since upgrading to VS 2015 Update 1 (that includes Typescript 1.7) and Azure SDK 2.8, packaging my Azure application for deployment has become a challenge due to an error in the file path where the packager is attempting to copy the js output file: Erro ...

Difficulty displaying SVGs in VueJS when using Typescript

I'm facing a strange issue that seems like it should be easy to solve. When using Vue with JavaScript as CDN, everything works perfectly (just like it does in Angular or any other framework). <img src="/assets/images/icons/myicoin.svg> However ...

What is the best way to monitor updates made to a function that utilizes firestore's onSnapShot method?

I am currently working with the following function: public GetExercisePosts(user: User): ExercisePost[] { const exercisePosts = new Array<ExercisePost>(); firebase.firestore().collection('exercise-posts').where('created-by&apo ...