withClerkMiddleware error when changing trcp.ts

[27leaves]

When follwing the youtube tutorial, I get the following message as soon as I add the getAuth in the trcp.ts:

tRPC failed on : 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

I think I did everything like mentioned, also I compared the middleware.ts and the trcp.ts with the ones in this repository. Do you/any of you know what could have gone wrong here?

Here's the link to my repo: https://github.com/27leaves/chirp/

Thank you!

[simonpeters]

I'm having the same issue.

Restarting everything fixed it for me.

[cokealmonacid]

Exact same issue, i've already restarted everything and keeps failing, any suggestion?

[recnepspencer]

im having the same issue too

[cokealmonacid]

@recnepspencer

Delete node_modules folder and rerun npm install

[CodyOakes]

Had the same issue ended up changing the matcher in middleware.ts, as suggested in this thread (https://www.answeroverflow.com/m/1099604152130220052) by James Perkins: export const config = { matcher: [ "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/" ], };

[officialabdulrehman]

Same issue here

Solution from James Perkins worked perfectly.

[fawadniazi]

"/(.?trpc.?|(?!static|.\..|_next|favicon.ico).*)", "/"

This works for me

This was my error

❌ tRPC failed on : You need to use "authMiddleware" (or the deprecated "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

[CookingWithCale]

I'm still getting the error after I switch to export const config = { matcher: [ "/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/" ], }; using "@clerk/nextjs": "^4.17.3"

❌ tRPC failed on <no-path>: You need to use "authMiddleware" (or the deprecated "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

[CookingWithCale]

We're using a soon-to-be deprecated API. I wish there was an app that can auto-generate tutorials with the latest API. The Clerk documentation isn't clear about which version the documentation is for. I am copying and pasting directly from the Clerk Middleware documentation. I've tried the withClerkMiddleware code, I've tried copying and pasting the code from chirp, and I've also tried the new authMiddleware that works with Next.JS 13's app.

Then I did

npm update -g
npm audit --force

and now there are 0 vulnerabilities using "@clerk/nextjs": "^4.11.7" and there is no authMiddleware and using the code from the above fix and linked Clerk Documentation didn't help. Here is the full package.json

{
  "name": "chirp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "postinstall": "prisma generate",
    "lint": "next lint",
    "start": "next start",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.11.7",
    "@prisma/client": "^4.9.0",
    "@tanstack/react-query": "^4.20.2",
    "@trpc/client": "^10.9.0",
    "@trpc/next": "^10.9.0",
    "@trpc/react-query": "^10.9.0",
    "@trpc/server": "^10.9.0",
    "@upstash/ratelimit": "^0.4.0",
    "@upstash/redis": "^1.20.1",
    "dayjs": "^1.11.7",
    "next": "^13.2.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hot-toast": "^2.4.0",
    "superjson": "1.9.1",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@types/eslint": "^8.21.1",
    "@types/node": "^18.14.0",
    "@types/prettier": "^2.7.2",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.53.0",
    "@typescript-eslint/parser": "^5.53.0",
    "autoprefixer": "^10.4.7",
    "eslint": "^8.34.0",
    "eslint-config-next": "^13.2.1",
    "postcss": "^8.4.14",
    "prettier": "^2.8.1",
    "prettier-plugin-tailwindcss": "^0.2.1",
    "prisma": "^4.13.0",
    "tailwindcss": "^3.2.0",
    "typescript": "^4.9.5"
  },
  "ct3aMetadata": {
    "initVersion": "7.7.0"
  }
}

I then copied and pasted the package.json from the chirp demo and it cuased the env.mjs file to blow up so I replaced that with the env.js from chirp, and still no go. Same error.

❌ tRPC failed on : You need to use "authMiddleware" (or the deprecated "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

[1moein]

I had the same issue; replaced Theo's middleware.ts file with this snippet based on the previous suggestions:

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware(() => {
  console.log("middleware running...");
  return NextResponse.next();
});

export const config = {
  matcher: ["/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/"],
};

I also deleted the node modules folder and ran npm install. Problem solved! Thanks everyone 🥂

[johannpereze]

I had the same issue; replaced Theo's middleware.ts file with this snippet based on the previous suggestions:

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware(() => {
  console.log("middleware running...");
  return NextResponse.next();
});

export const config = {
  matcher: ["/(.*?trpc.*?|(?!static|.*\\..*|_next|favicon.ico).*)", "/"],
};

I also deleted the node modules folder and ran npm install. Problem solved! Thanks everyone 🥂

This worked for me, but couldn't make it work using the new API, since withClerkMiddleware is deprecated. Has anyone been able to?