Chirp Tutorial: tRPC failed on <no-path>:
Following along with the theo turtorial https://youtu.be/YkOSUVzOAA4?t=5612
I have my trpc.ts file nearly identical but I run into this error:
tRPC failed on <no-path>: You need to use "withClerkMiddleware" in your Next.js middleware file. You also need to make sure that your middleware matcher is configured correctly and matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs It's pretty much the exact same file yet I get this error. Just makes no sense. Reproduction Repo: https://github.com/Apestein/chirp
tRPC failed on <no-path>: You need to use "withClerkMiddleware" in your Next.js middleware file. You also need to make sure that your middleware matcher is configured correctly and matches this route or page. See https://clerk.com/docs/quickstarts/get-started-with-nextjs It's pretty much the exact same file yet I get this error. Just makes no sense. Reproduction Repo: https://github.com/Apestein/chirp
25 Replies
try this as your middleware matcher
yeah that worked but can you explain to me why?
trpc routes on the api layer use a period to denote the procedure.
So it needs to be added to the matcher for it to run properly.
Hi @James Perkins , I had the exact same issue, but when I updated the middleware matcher as you suggested, it just kept calling the middleware in a loop and would never execute the public (prisma) procedure. Any thoughts?
check your clock( system clock)
if it’s skewed outside the clock skew you are going to be pushed in a redirect loop as we try to issue you a new jwt and it’s constantly expired
Sorry, but I'm not sure what you mean. I can try to figure that it out, but can you direct me?
On your computer is the time correct
Yes.
so when you say it redirects. do you manage to login or does the page just constantly refresh?
I put a console.log statement in the withClerkMiddleware function inside middleware.ts, and when I cal the public procedure on a public path, I get this loop, but the TRPC (prisma) query never executes.
CLERK MIDDLEWARE RUNNING
RETURNING A PUBLIC PATH
CLERK MIDDLEWARE RUNNING
RETURNING A PUBLIC PATH
CLERK MIDDLEWARE RUNNING
CLERK MIDDLEWARE RUNNING
RETURNING A PUBLIC PATH
CLERK MIDDLEWARE RUNNING
CLERK MIDDLEWARE RUNNING
RETURNING A PUBLIC PATH
CLERK MIDDLEWARE RUNNING
CLERK MIDDLEWARE RUNNING
RETURNING A PUBLIC PATH
CLERK MIDDLEWARE RUNNING
CLERK MIDDLEWARE RUNNING
export default withClerkMiddleware((request: NextRequest) => {
console.log("CLERK MIDDLEWARE RUNNING")
if (isPublic(request.nextUrl.pathname)) {
console.log("RETURNING A PUBLIC PATH")
return NextResponse.next();
}
// if the user is not signed in redirect them to the sign in page.
const { userId } = getAuth(request);
if (!userId) {
// redirect the users to /pages/sign-in/[[...index]].ts
const signInUrl = new URL("/sign-in", request.url);
signInUrl.searchParams.set("redirect_url", request.url);
return NextResponse.redirect(signInUrl);
}
return NextResponse.next();
});
one second
Okay can you do this:
Will give it a go. FYI. I have a previous version of this that works, but that is before Theo made the changes to the trpc.ts file in his video.
I'm just trying to figure out what is breaking it.
I had to comment out the second reference to userId and got it to work. this is returned (multiple times)
{
apiKey: '',
secretKey: 'sk_test',
apiUrl: 'https://api.clerk.dev',
apiVersion: 'v1',
authStatus: 'signed-out',
authMessage: undefined,
authReason: 'standard-signed-out',
jwtKey: ''
}
Okay what do your public paths look like?
Are you using windows?
const publicPaths = ["/", "/sign-in", "/sign-up", "/_SANDBOX/PageB*"];
Yes, windows
Okay so lets do this to make it easier for me to debug.
Then send me a result.
was too long for discord
Okay yeah it's working correctly.
is posts.getAll a public route and want to be able to run without a user logged in?
Yes. It's the first simple example in Theo's demo. That's where I got stuck.
okay 🙂
caught up now.
Okay so!
Add the logic for the private procedure seemed to break it and give me the TRPC fail message that Appstein reported.
So the middleware that Theo's uses is this:
But the one you are using has page protection.
which makes everything a bit different.
SO the middleware you have you need to do this:
looking at it...
basically
You need to add the procedure to your publicPath
Yeah, that line... (just noticed it.)
I have many different versions of the trpc.ts and middleware.ts files! Let me sort through this for a few mins. THANK YOU.
It's working the public paths and, more important, I think I understand it now. Protecting the API path was not something on my radar! THANK YOU.
awesome 👏 glad to help