Clerk Middleware crashing in production for Next 12.2.2

Question

Have not been able to get close to understanding the underlying cause of this issue, but I am trying to implement Clerk Authentication using NextJS 12.2.2 and I have everything working in the dev environment. However when I move into the production environment, my site instantly crashes on load due to the following error:

ReferenceError: __import_unsupported is not defined
    at (vc/edge/function:14:2050)
    at (vc/edge/function:14:656)
    at (vc/edge/function:14:3107)
    at (vc/edge/function:14:656)
    at (vc/edge/function:67:13871)
    at (vc/edge/function:14:656)
    at (vc/edge/function:67:15731)
    at (vc/edge/function:14:656)
    at (vc/edge/function:67:27265)
    at (vc/edge/function:14:656)

ReferenceError: __import_unsupported is not defined
    at (external root " __import_unsupported('buffer')":1:0)
    at (webpack/bootstrap:21:0)
    at (node_modules/rfc4648/lib/index.mjs:11:15)
    at (webpack/bootstrap:21:0)
    at (node_modules/@clerk/nextjs/dist/server/clerk.js:5:18)
    at (webpack/bootstrap:21:0)
    at (node_modules/@clerk/nextjs/dist/server/index.js:4:21)
    at (webpack/bootstrap:21:0)
    at (node_modules/@clerk/nextjs/server.js:1:0)
    at (webpack/bootstrap:21:0)

My Clerk middleware.js file:

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

export default withClerkMiddleware((req) => {
  return NextResponse.next();
});

My package.json

{
  "name": "generic_auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.8.2",
    "@clerk/themes": "^1.2.41",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@next-auth/prisma-adapter": "^0.5.2-next.19",
    "@prisma/client": "^3.11.1",
    "@react-google-maps/api": "^2.7.0",
    "@stripe/stripe-js": "^1.26.0",
    "@vercel/analytics": "^0.1.7",
    "aws-sdk": "^2.1105.0",
    "cross-env": "^7.0.3",
    "fs": "^0.0.1-security",
    "global": "^4.4.0",
    "graphql": "^16.3.0",
    "image-size": "^1.0.1",
    "material-ui-icons": "^1.0.0-beta.36",
    "micro": "^9.3.4",
    "moment": "^2.29.2",
    "next": "12.2.2",
    "next-auth": "^4.10.3",
    "next-stripe": "^1.0.0-beta.1",
    "nodemailer": "^6.7.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-places-autocomplete": "^7.3.0",
    "react-query": "^3.34.19",
    "sass": "^1.49.9",
    "sharp": "^0.30.3",
    "stripe": "^8.215.0",
    "underscore": "^1.13.6",
    "vercel": "^24.0.1"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "prisma": "^3.11.1",
    "typescript": "4.6.3"
  }
}

Anyone have any idea on this? Happy to provide any other info required to debug this but dont want to overload the original post with too much info. Thanks!

Answer 1

withClerkMiddleware is now deprecated, but using the snippet provided by the Clerk documentation triggered an error:

error - ../../node_modules/@clerk/nextjs/dist/esm/server-helpers.client.js (2:0) @ <unknown>
error - authMiddleware() can only be used in a server environment.

@Iknownothings answer pointed me towards a solution.

It's key to import from @clerk/nextjs/server and not @clerk/nextjs

Full example of middleware.ts (I am using a tRPC backend)

import { authMiddleware } from '@clerk/nextjs/server';

export default authMiddleware();

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

Answer 2

Updating from Next 12.2.2 -> 12.2.6 resolved this issue for me. Seems that there is a problem with Middleware in 12.2.2 that has since been resolved.

To be clear, along with updating Next, I also updated react and react-dom, as well as removed unused Next-Auth packages from my previous Auth implementation. Update package.json is as follows:

{
  "name": "generic_auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.8.2",
    "@clerk/themes": "^1.2.41",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@prisma/client": "^3.11.1",
    "@react-google-maps/api": "^2.7.0",
    "@stripe/stripe-js": "^1.26.0",
    "@vercel/analytics": "^0.1.7",
    "aws-sdk": "^2.1105.0",
    "cross-env": "^7.0.3",
    "fs": "^0.0.1-security",
    "global": "^4.4.0",
    "graphql": "^16.3.0",
    "image-size": "^1.0.1",
    "material-ui-icons": "^1.0.0-beta.36",
    "micro": "^9.3.4",
    "moment": "^2.29.2",
    "next": "12.2.6",
    "next-stripe": "^1.0.0-beta.1",
    "nodemailer": "^6.7.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-places-autocomplete": "^7.3.0",
    "react-query": "^3.34.19",
    "sass": "^1.49.9",
    "sharp": "^0.30.3",
    "stripe": "^8.215.0",
    "underscore": "^1.13.6",
    "vercel": "^24.0.1"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "prisma": "^3.11.1",
    "typescript": "4.6.3"
  }
}

For anyone looking into an Auth choice, seriously take a look at Clerk! I was able to chat with one of their devs over live chat on their site for the past hour to debug this, and they were extremely helpful. On top of that, Clerk has easily been one of the easiest experiences I have had and has taken a lot of the stress of Auth out of the picture for me, allowing me to focus on implementing my site.