Closed frasermarch closed 1 year ago
I suddenly started to get this error after updating to Next.js 13.5
I also had the same issue: (my error was in the server side as I wanted to use auth in a server component) I got the error when the middleware.tsx file was outside the 'src' directory. To fix this error I put the middleware.tsx file within the src directory but outside the app directory and it worked for me.
This solution fixed it for me as well unbelievably. Cheers
i did that but the error is still there.I have to change my middleware.ts codes as suggested by @aryanpachori .But now as i go along the project i face new errors and i figure it is from the modified middleware.ts.Can you show me your middleware.ts? @ajaytitus1386
I also had the same issue: (my error was in the server side as I wanted to use auth in a server component) I got the error when the middleware.tsx file was outside the 'src' directory. To fix this error I put the middleware.tsx file within the src directory but outside the app directory and it worked for me.
This solution fixed it for me as well unbelievably. Cheers
i did that but the error is still there.I have to change my middleware.ts codes as suggested by @aryanpachori .But now as i go along the project i face new errors and i figure it is from the modified middleware.ts.Can you show me your middleware.ts? @ajaytitus1386
Sure, Try renaming the file between .ts
and .tsx
and see if that helps.
middleware.ts
import { authMiddleware } from "@clerk/nextjs"
// This example protects all routes including api/trpc routes
// Please edit this to allow other routes to be public as needed.
// See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your middleware
export default authMiddleware({
publicRoutes: ["/", "sign-in", "sign-up", "/api/webhook"],
})
export const config = {
matcher: ["/((?!.*\\..*|_next).*)", "/", "/(api|trpc)(.*)"],
}
Moving stuff under src
fixed lot's of other warnings/erros on build but this error prevails. I tried renaming src/middleware.ts
to src/middleware.tsx
and back without change.
I'm also getting this error with /middleware.ts
and Next 13.5.2
!
Had the same issue in 13.5.1 & 13.5.2, so I temporarily renamed the pages directory to see if it was interfering with App Router middleware, and turns out it was. So I moved any existing api routes and pages over to the app router. No longer have the issue.
I don't have both App and pages folders. Just App folder.
This can be easily reproduced on the latest versions of next.js and clerk. I tried the following:
.ts
and .tsx
extension. I found out a solution for me. I deleted the "loading.tsx" from the project and the error went away.
Hey y'all, it sounds like there might be a variety of root causes here.
If at all possible, please produce a minimal reproduction and open an issue in our javascript
repository. A reproduction will allow us to isolate the issue and investigate further. 🙏
Hey @stephyswe, How did you solve this issue?
Haven't solved it. In production no error show and all working fine. I say it's a bug. be nice if clerk dev could look into this more.
Aaah, I am getting an error in production!
@zephyrus21 did you find any alternatives to Clark?
You could use Kinde. But if your region are far from their servers (you will be able to see 3 or 4 regions at the start of the onboarding process, which you can select of your own choice) then it could cause latency. if not then its the best options
I also had the same issue: (my error was in the server side as I wanted to use auth in a server component)
I got the error when the middleware.tsx file was outside the 'src' directory. To fix this error I put the middleware.tsx file within the src directory but outside the app directory and it worked for me.
NOTE!!: It is good thing to note that if you still get this error even if you correctly placed the middleware.ts, you will also get this error msg if you use auth() inside a route.ts api endpoint which you should not, instead use getAuth(req) to access it.
Documentation api routes: https://clerk.com/docs/quickstarts/nextjs#api-routes
Hello,
the starter https://github.com/clerkinc/clerk-next-app-router-starter works in its current form as-is. The Next.js docs say:
Use the file middleware.ts (or .js) in the root of your project to define Middleware. For example, at the same level as pages or app, or inside src if applicable.
So if you're using the src
folder, you need to move your Middleware file.
But those are issues in your code, not inside this starter. Thus we'll close this.
As weird and bad as the error is (worst of all it's misleading), upgrading my node version to 20.4 was the only thing that fixed it. Obviously, have the file at the right level, but you may also need to upgrade your node version.
nvm use 20
I've been getting this error on all of my Clerk projects. Even when I clone this repo and make no changes other than to put in my PK/SK.
Any tips or advice?
Things I've tried: