Clerk Auth causing Next.js to fail with 500: Internal Server Error

[chiubaca]

Has any had success running Next.js + Cloudflare pages with Clerk Auth ?

I have a barebones repo demonstrating the error I'm encountering. The project is all scaffolded with the Cloudflares C3 CLI
https://github.com/chiubaca/fullstack-cf-pages-next-app

Live demo of the error here:
https://fullstack-next-cloudflare.pages.dev/

Here is the full functions stack trace when hitting the site:

{
  "outcome": "ok",
  "scriptName": "pages-worker--2468115-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [
    {
      "message": [
        "Error: An error occurred while evaluating the target edge function (__next-on-pages-dist__/functions/middleware.func.js)"
      ],
      "level": "error",
      "timestamp": 1713709683344
    }
  ],
  "eventTimestamp": 1713709683343,
  "event": {
    "request": {
      "url": "https://d2f24c7c.fullstack-next-cloudflare.pages.dev/",
      "method": "GET",
      "headers": {
        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
        "accept-encoding": "gzip, br",
        "accept-language": "en-GB,en-US;q=0.9,en;q=0.8",
        "cf-connecting-ip": "2a00:23c8:960c:b201:8014:aa70:44a9:ab0d",
        "cf-ipcountry": "GB",
        "cf-ray": "877e0ef0dd9ddc45",
        "cf-visitor": "{\"scheme\":\"https\"}",
        "connection": "Keep-Alive",
        "host": "d2f24c7c.fullstack-next-cloudflare.pages.dev",
        "priority": "u=0, i",
        "sec-ch-ua": "\"Chromium\";v=\"124\", \"Google Chrome\";v=\"124\", \"Not-A.Brand\";v=\"99\"",
        "sec-ch-ua-mobile": "?0",
        "sec-ch-ua-platform": "\"macOS\"",
        "sec-fetch-dest": "document",
        "sec-fetch-mode": "navigate",
        "sec-fetch-site": "cross-site",
        "sec-fetch-user": "?1",
        "upgrade-insecure-requests": "1",
        "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36",
        "x-forwarded-proto": "https",
        "x-real-ip": "2a00:23c8:960c:b201:8014:aa70:44a9:ab0d"
      },
      "cf": {
        "longitude": "-0.07380",
        "httpProtocol": "HTTP/3",
        "tlsCipher": "AEAD-AES128-GCM-SHA256",
        "continent": "EU",
        "asn": 2856,
        "clientAcceptEncoding": "gzip, deflate, br, zstd",
        "country": "GB",
        "colo": "LHR",
        "verifiedBotCategory": "",
        "tlsClientAuth": {
          "certIssuerDNLegacy": "",
          "certIssuerSKI": "",
          "certSubjectDNRFC2253": "",
          "certSubjectDNLegacy": "",
          "certFingerprintSHA256": "",
          "certNotBefore": "",
          "certSKI": "",
          "certSerial": "",
          "certIssuerDN": "",
          "certVerified": "NONE",
          "certNotAfter": "",
          "certSubjectDN": "",
          "certPresented": "0",
          "certRevoked": "0",
          "certIssuerSerial": "",
          "certIssuerDNRFC2253": "",
          "certFingerprintSHA1": ""
        },
        "tlsClientHelloLength": "1758",
        "tlsExportedAuthenticator": {
          "clientFinished": "1932d8890ff76092cd87c26c9bafe2ff5c43eed34ee17235bda5b24375cd7756",
          "clientHandshake": "ac5234b67d3f9033268ca8556bb181b4d0fdca236d24108a7e9d9536ab6c7b8f",
          "serverHandshake": "1cc7043b40a52be591263e1d24da7b7805d0e24ab599a22f6a1aa18bb5491842",
          "serverFinished": "2d00fdc9ab3b8c6ef95a7e6e093ca47baa14e4a8add8cf0bf8d4787029e1f0f9"
        },
        "tlsVersion": "TLSv1.3",
        "city": "Anerley",
        "timezone": "Europe/London",
        "tlsClientExtensionsSha1": "NypALjaDt+Zo+fwG8bQcpuQHg3I=",
        "region": "England",
        "edgeRequestKeepAliveStatus": 1,
        "requestPriority": "",
        "latitude": "51.40720",
        "postalCode": "SE20",
        "tlsClientRandom": "2xbnSGq6B9YuZU2wlAmUfP0ZKDd1ZWKrUGd8cnFLEfY=",
        "regionCode": "ENG",
        "asOrganization": "BT",
        "pagesHostName": "d2f24c7c.fullstack-next-cloudflare.pages.dev",
        "botManagement": {
          "corporateProxy": false,
          "verifiedBot": false,
          "jsDetection": {
            "passed": false
          },
          "staticResource": false,
          "detectionIds": {},
          "score": 99
        }
      }
    },
    "response": {
      "status": 500
    }
  },
  "id": 0
}

When debugging and previewing locally with npm run pages:build && wrangler pages dev. I get the following errors:

✘ [ERROR] Error: An error occurred while evaluating the target edge function (__next-on-pages-dist__/functions/middleware.func.js)

      at E
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:15383)
      at async M.runRouteMiddleware
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:21764)
      at async M.checkRoute
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:23859)
      at async M.checkPhase
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:24705)
      at async M.run
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:25374)
      at async ee
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:25654)
      at async Y
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/.vercel/output/static/_worker.js/index.js:40:25583)
      at async jsonError
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/node_modules/wrangler/templates/middleware/middleware-miniflare3-json-error.ts:22:10)
      at async drainBody
  (file:///Users/alexanderchiu/Projects/Personal/cf-pages-next-app/node_modules/wrangler/templates/middleware/middleware-ensure-req-body-drained.ts:5:10)