fix: Types and NextJS 14 support (#1939, #1948) (#1968)

* fix(clerk-sdk-node): Fix types of ClerkExpressWithAuth/ClerkExpressRequireAuth args (#1939)

#1938

* fix(backend): Support NextJS 14 (#1948)

* fix(backend): Fix for next 14 fetch bind issue

* fix(nextjs): Use named imports for fetch runtime polyfill

Next14 seems to have changed the way it handles default exports when using the webpack bundler for some of their build variants when using `npm run dev`. This commit ensures that we no longer use the default export in an effort to improve compat between the different nextjs versions.

More information can be found here: https://esbuild.github.io/content-types/#default-interop
and here: #612

* Create late-dolphins-peel.md

---------

Co-authored-by: Nikos Douvlis <nikosdouvlis@gmail.com>

---------

Co-authored-by: George Desipris <73396808+desiprisg@users.noreply.github.com>
Co-authored-by: Nikos Douvlis <nikosdouvlis@gmail.com>

.changeset/late-dolphins-peel.md

@@ -0,0 +1,5 @@
+---
+"@clerk/backend": minor
+---
+
+Add support for NextJS 14

.changeset/tasty-countries-walk.md

@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-sdk-node': patch
+---
+
+Fix types of ClerkExpressWithAuth/ClerkExpressRequireAuth args

packages/backend/src/runtime/browser/fetch.mjs

@@ -5,3 +5,4 @@ export const RuntimeHeaders = Headers;
 export const RuntimeRequest = Request;
 export const RuntimeResponse = Response;
 export const RuntimeAbortController = AbortController;
+export const RuntimeFetch = fetch;

packages/backend/src/runtime/index.ts

@@ -18,7 +18,7 @@ import crypto from '#crypto';
 import * as fetchApisPolyfill from '#fetch';
 
 const {
-  default: fetch,
+  RuntimeFetch,
   RuntimeAbortController,
   RuntimeBlob,
   RuntimeFormData,
@@ -44,7 +44,7 @@ type Runtime = {
 // The globalThis object is supported for Node >= 12.0.
 //
 // https://github.com/supabase/supabase/issues/4417
-const globalFetch = fetch.bind(globalThis);
+const globalFetch = RuntimeFetch.bind(globalThis);
 // DO NOT CHANGE: Runtime needs to be imported as a default export so that we can stub its dependencies with Sinon.js
 // For more information refer to https://sinonjs.org/how-to/stub-dependency/
 const runtime: Runtime = {

packages/backend/src/runtime/node/fetch.js

@@ -8,3 +8,4 @@ module.exports.RuntimeHeaders = Headers;
 module.exports.RuntimeRequest = Request;
 module.exports.RuntimeResponse = Response;
 module.exports.RuntimeAbortController = AbortController;
+module.exports.RuntimeFetch = fetch;

packages/sdk-node/src/clerkClient.ts

@@ -75,13 +75,13 @@ export const clerkClient = new Proxy(clerkClientSingleton, {
 /**
  * Stand-alone express middlewares bound to the pre-initialised clerkClient
  */
-export const ClerkExpressRequireAuth = (...args: any) => {
+export const ClerkExpressRequireAuth = (...args: Parameters<ReturnType<typeof createClerkExpressRequireAuth>>) => {
   const env = { ...loadApiEnv(), ...loadClientEnv() };
   const fn = createClerkExpressRequireAuth({ clerkClient, ...env });
   return fn(...args);
 };
 
-export const ClerkExpressWithAuth = (...args: any) => {
+export const ClerkExpressWithAuth = (...args: Parameters<ReturnType<typeof createClerkExpressWithAuth>>) => {
   const env = { ...loadApiEnv(), ...loadClientEnv() };
   const fn = createClerkExpressWithAuth({ clerkClient, ...env });
   return fn(...args);