Add globalThis.AsyncLocalStorage for 13.X versions of Next.js (#115)

.changeset/seven-cougars-fly.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': minor
+---
+
+feat: Add support for current 13.X versions of Next.js

README.md

@@ -48,6 +48,8 @@ Reference:
 
 1. Add a `NODE_VERSION` environment variable set to `16` or greater (`18` is not supported yet, See [Build Image Update Discussion](https://github.com/cloudflare/pages-build-image/discussions/1).
 
+1. In the Pages project **Settings** > **Functions** > **Compatibility Flags**, add the `nodejs_compat` and ensure the **Compatibility Date** is set to at least `2022-11-30`.
+
 1. The project should now be ready to deploy. Create a new deployment.
 
 ## `@cloudflare/next-on-pages` CLI

src/index.ts

@@ -488,12 +488,16 @@ const transform = async ({
 	await writeFile(
 		functionsFile,
 		`
+		export const AsyncLocalStoragePromise = import('node:async_hooks').then(({ AsyncLocalStorage }) => {
+			globalThis.AsyncLocalStorage = AsyncLocalStorage;
+		}).catch(() => undefined);
+
     export const __FUNCTIONS__ = {${[...hydratedFunctions.entries()]
 			.map(
 				([name, { matchers, filepath }]) =>
 					`"${name}": { matchers: ${JSON.stringify(
 						matchers
-					)}, entrypoint: require('${filepath}')}`
+					)}, entrypoint: AsyncLocalStoragePromise.then(() => import('${filepath}'))}`
 			)
 			.join(',')}};
 
@@ -502,7 +506,7 @@ const transform = async ({
 					([name, { matchers, filepath }]) =>
 						`"${name}": { matchers: ${JSON.stringify(
 							matchers
-						)}, entrypoint: require('${filepath}')}`
+						)}, entrypoint: AsyncLocalStoragePromise.then(() => import('${filepath}'))}`
 				)
 				.join(',')}};`
 	);
@@ -514,8 +518,9 @@ const transform = async ({
 			join(__dirname, '../templates/_worker.js/globals.js'),
 			functionsFile,
 		],
-		target: 'es2021',
+		target: 'es2022',
 		platform: 'neutral',
+		external: ['node:async_hooks'],
 		define: {
 			__CONFIG__: JSON.stringify(config),
 			__BASE_PATH__: JSON.stringify(basePath),

templates/_worker.js/index.ts

@@ -117,7 +117,7 @@ type EdgeFunction = {
 
 type EdgeFunctions = {
 	matchers: { regexp: string }[];
-	entrypoint: EdgeFunction;
+	entrypoint: Promise<EdgeFunction>;
 }[];
 
 declare const __CONFIG__: Config;
@@ -137,10 +137,9 @@ export default {
 
 		for (const route of routes) {
 			if ('middlewarePath' in route && route.middlewarePath in __MIDDLEWARE__) {
-				return await __MIDDLEWARE__[route.middlewarePath].entrypoint.default(
-					request,
-					context
-				);
+				return await (
+					await __MIDDLEWARE__[route.middlewarePath].entrypoint
+				).default(request, context);
 			}
 		}
 
@@ -182,7 +181,7 @@ export default {
 
 			if (found) {
 				const adjustedRequest = adjustRequestForVercel(request);
-				return entrypoint.default(adjustedRequest, context);
+				return (await entrypoint).default(adjustedRequest, context);
 			}
 		}