fix: patch @vercel/og usage to use the edge runtime version (#283)

Author: james-elicx

.changeset/quick-timers-fail.md

@@ -0,0 +1,7 @@
+---
+"@opennextjs/cloudflare": patch
+---
+
+fix: @vercel/og failing due to using the node version.
+
+Patches usage of the @vercel/og library to require the edge runtime version, and enables importing of the fallback font.

.github/workflows/checks.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches: [main, experimental]
   pull_request:
-    branches: [main, experimental]
 
 jobs:
   checks:

.github/workflows/playwright.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches: [main]
   pull_request:
-    branches: [main]
 
 jobs:
   test:

.github/workflows/prereleases.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches: [main, experimental]
   pull_request:
-    branches: [main, experimental]
 
 jobs:
   release:

examples/api/app/og/route.tsx

@@ -0,0 +1,65 @@
+import { ImageResponse } from "next/og";
+
+export const dynamic = "force-dynamic";
+
+export async function GET() {
+  try {
+    return new ImageResponse(
+      (
+        <div
+          style={{
+            backgroundColor: "black",
+            backgroundSize: "150px 150px",
+            height: "100%",
+            width: "100%",
+            display: "flex",
+            textAlign: "center",
+            alignItems: "center",
+            justifyContent: "center",
+            flexDirection: "column",
+            flexWrap: "nowrap",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              justifyItems: "center",
+            }}
+          >
+            <img
+              alt="Vercel"
+              height={200}
+              src="data:image/svg+xml,%3Csvg width='116' height='100' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M57.5 0L115 100H0L57.5 0z' /%3E%3C/svg%3E"
+              style={{ margin: "0 30px" }}
+              width={232}
+            />
+          </div>
+          <div
+            style={{
+              fontSize: 60,
+              fontStyle: "normal",
+              letterSpacing: "-0.025em",
+              color: "white",
+              marginTop: 30,
+              padding: "0 120px",
+              lineHeight: 1.4,
+              whiteSpace: "pre-wrap",
+            }}
+          >
+            'next/og'
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    );
+  } catch (e: any) {
+    return new Response("Failed to generate the image", {
+      status: 500,
+    });
+  }
+}

examples/api/e2e/base.spec.ts

@@ -1,4 +1,16 @@
 import { test, expect } from "@playwright/test";
+import type { BinaryLike } from "node:crypto";
+import { createHash } from "node:crypto";
+
+const OG_MD5 = "2f7b724d62d8c7739076da211aa62e7b";
+
+export function validateMd5(data: Buffer, expectedHash: string) {
+  return (
+    createHash("md5")
+      .update(data as BinaryLike)
+      .digest("hex") === expectedHash
+  );
+}
 
 test("the application's noop index page is visible and it allows navigating to the hello-world api route", async ({
   page,
@@ -42,3 +54,10 @@ test("returns correct information about the request from a route handler", async
   const expectedURL = expect.stringMatching(/https?:\/\/localhost:(?!3000)\d+\/api\/request/);
   await expect(res.json()).resolves.toEqual({ nextUrl: expectedURL, url: expectedURL });
 });
+
+test("generates an og image successfully", async ({ page }) => {
+  const res = await page.request.get("/og");
+  expect(res.status()).toEqual(200);
+  expect(res.headers()["content-type"]).toEqual("image/png");
+  expect(validateMd5(await res.body(), OG_MD5)).toEqual(true);
+});

packages/cloudflare/src/cli/build/bundle-server.ts

@@ -33,7 +33,8 @@ export async function bundleServer(buildOpts: BuildOptions): Promise<void> {
   console.log(`\x1b[35m⚙️ Bundling the OpenNext server...\n\x1b[0m`);
 
   patches.patchWranglerDeps(buildOpts);
-  patches.updateWebpackChunksFile(buildOpts);
+  await patches.updateWebpackChunksFile(buildOpts);
+  patches.patchVercelOgLibrary(buildOpts);
 
   const outputPath = path.join(outputDir, "server-functions", "default");
   const packagePath = getPackagePath(buildOpts);
@@ -176,7 +177,7 @@ async function updateWorkerBundledCode(workerOutputFile: string, buildOpts: Buil
 
   const bundle = parse(Lang.TypeScript, patchedCode).root();
 
-  const edits = patchOptionalDependencies(bundle);
+  const { edits } = patchOptionalDependencies(bundle);
 
   await writeFile(workerOutputFile, bundle.commitEdits(edits));
 }

packages/cloudflare/src/cli/build/patches/ast/optional-deps.ts

@@ -1,6 +1,6 @@
 import { type SgNode } from "@ast-grep/napi";
 
-import { getRuleEdits } from "./util.js";
+import { applyRule } from "./util.js";
 
 /**
  * Handle optional dependencies.
@@ -31,5 +31,5 @@ fix: |-
 `;
 
 export function patchOptionalDependencies(root: SgNode) {
-  return getRuleEdits(optionalDepRule, root);
+  return applyRule(optionalDepRule, root);
 }

packages/cloudflare/src/cli/build/patches/ast/util.ts

@@ -1,3 +1,5 @@
+import { readFileSync } from "node:fs";
+
 import { type Edit, Lang, type NapiConfig, parse, type SgNode } from "@ast-grep/napi";
 import yaml from "yaml";
 
@@ -8,7 +10,7 @@ import yaml from "yaml";
 export type RuleConfig = NapiConfig & { fix?: string };
 
 /**
- * Returns the `Edit`s for an ast-grep rule in yaml format
+ * Returns the `Edit`s and `Match`es for an ast-grep rule in yaml format
  *
  * The rule must have a `fix` to rewrite the matched node.
  *
@@ -17,9 +19,9 @@ export type RuleConfig = NapiConfig & { fix?: string };
  * @param rule The rule. Either a yaml string or an instance of `RuleConfig`
  * @param root The root node
  * @param once only apply once
- * @returns A list of edits.
+ * @returns A list of edits and a list of matches.
  */
-export function getRuleEdits(rule: string | RuleConfig, root: SgNode, { once = false } = {}) {
+export function applyRule(rule: string | RuleConfig, root: SgNode, { once = false } = {}) {
   const ruleConfig: RuleConfig = typeof rule === "string" ? yaml.parse(rule) : rule;
   if (ruleConfig.transform) {
     throw new Error("transform is not supported");
@@ -50,7 +52,18 @@ export function getRuleEdits(rule: string | RuleConfig, root: SgNode, { once = f
     );
   });
 
-  return edits;
+  return { edits, matches };
+}
+
+/**
+ * Parse a file and obtain its root.
+ *
+ * @param path The file path
+ * @param lang The language to parse. Defaults to TypeScript.
+ * @returns The root for the file.
+ */
+export function parseFile(path: string, lang = Lang.TypeScript) {
+  return parse(lang, readFileSync(path, { encoding: "utf-8" })).root();
 }
 
 /**
@@ -71,6 +84,6 @@ export function patchCode(
   { lang = Lang.TypeScript, once = false } = {}
 ): string {
   const node = parse(lang, code).root();
-  const edits = getRuleEdits(rule, node, { once });
+  const { edits } = applyRule(rule, node, { once });
   return node.commitEdits(edits);
 }

packages/cloudflare/src/cli/build/patches/ast/vercel-og.spec.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from "vitest";
+
+import { patchCode } from "./util";
+import { vercelOgFallbackFontRule, vercelOgImportRule } from "./vercel-og";
+
+describe("vercelOgImportRule", () => {
+  it("should rewrite a node import to an edge import", () => {
+    const code = `e.exports=import("next/dist/compiled/@vercel/og/index.node.js")`;
+    expect(patchCode(code, vercelOgImportRule)).toMatchInlineSnapshot(
+      `"e.exports=import("next/dist/compiled/@vercel/og/index.edge.js")"`
+    );
+  });
+});
+
+describe("vercelOgFallbackFontRule", () => {
+  it("should replace a fetch call for a font with an import", () => {
+    const code = `var fallbackFont = fetch(new URL("./noto-sans-v27-latin-regular.ttf", import.meta.url)).then((res) => res.arrayBuffer());`;
+    expect(patchCode(code, vercelOgFallbackFontRule)).toMatchInlineSnapshot(`
+      "async function getFallbackFont() {
+        // .bin is used so that a loader does not need to be configured for .ttf files
+        return (await import("./noto-sans-v27-latin-regular.ttf.bin")).default;
+      }
+
+      var fallbackFont = getFallbackFont();"
+    `);
+  });
+});