This Edge Function has crashed when using clerk middleware

Question

I tried to use clerk for authentication. It work fine in local. However it is not working when I deploy in production by vercel. it show This Edge Function has crashed.. I have not idea what happen here. Anyone have idea? I am using nextjs app directory.

"react": "18.2.0",
"react-dom": "18.2.0",
"next": "13.4.12",
"next-intl": "^2.19.0",

middleware.ts

import { authMiddleware } from "@clerk/nextjs";
import createMiddleware from "next-intl/middleware";

const intlMiddleware = createMiddleware({
  locales: ["en", "zh"],
  defaultLocale: "en",
});

export default authMiddleware({
  beforeAuth: (req) => {
    return intlMiddleware(req);
  },

  publicRoutes: ["/"],
});

// export default authMiddleware();

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

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ["www.gravatar.com"],
    formats: ["image/avif", "image/webp"],
  },
  swcMinify: false,
};

module.exports = nextConfig;

Answer 1

I too was facing the same issue, but then I realised that I forgot to add the environment variables to the project being deployed on vercel, you can add your environment variables by visiting the settings of your project on vercel -> Environment Variables -> Add Environment Variables.

Make sure you add the NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY and CLERK_SECRET_KEY, as environemnt variables, which you can get from your clerk dashboard.