@opennextjs/cloudflare 0.3.3 → 0.3.5

package/dist/cli/args.d.ts

@@ -1,5 +1,6 @@
 export declare function getArgs(): {
     skipNextBuild: boolean;
+    skipWranglerConfigCheck: boolean;
     outputDir?: string;
     minify: boolean;
 };

package/dist/cli/args.js

@@ -2,7 +2,7 @@ import { mkdirSync, statSync } from "node:fs";
 import { resolve } from "node:path";
 import { parseArgs } from "node:util";
 export function getArgs() {
-    const { skipBuild, output, noMinify } = parseArgs({
+    const { skipBuild, skipWranglerConfigCheck, output, noMinify } = parseArgs({
         options: {
             skipBuild: {
                 type: "boolean",
@@ -17,6 +17,10 @@ export function getArgs() {
                 type: "boolean",
                 default: false,
             },
+            skipWranglerConfigCheck: {
+                type: "boolean",
+                default: false,
+            },
         },
         allowPositionals: false,
     }).values;
@@ -27,6 +31,8 @@ export function getArgs() {
     return {
         outputDir,
         skipNextBuild: skipBuild || ["1", "true", "yes"].includes(String(process.env.SKIP_NEXT_APP_BUILD)),
+        skipWranglerConfigCheck: skipWranglerConfigCheck ||
+            ["1", "true", "yes"].includes(String(process.env.SKIP_WRANGLER_CONFIG_CHECK)),
         minify: !noMinify,
     };
 }

package/dist/cli/build/index.d.ts

@@ -7,3 +7,4 @@ import type { ProjectOptions } from "../config.js";
  * @param projectOpts The options for the project
  */
 export declare function build(projectOpts: ProjectOptions): Promise<void>;
+export declare function getLatestCompatDate(): Promise<string | undefined>;

package/dist/cli/build/index.js

@@ -1,4 +1,4 @@
-import { cpSync, existsSync } from "node:fs";
+import { cpSync, existsSync, readFileSync, writeFileSync } from "node:fs";
 import { createRequire } from "node:module";
 import { dirname, join } from "node:path";
 import { buildNextjsApp, setStandaloneBuildMode } from "@opennextjs/aws/build/buildNextApp.js";
@@ -42,6 +42,7 @@ export async function build(projectOpts) {
     buildHelper.checkRunningInsideNextjsApp(options);
     logger.info(`App directory: ${options.appPath}`);
     buildHelper.printNextjsVersion(options);
+    ensureNextjsVersionSupported(options);
     buildHelper.printOpenNextVersion(options);
     if (projectOpts.skipNextBuild) {
         logger.warn("Skipping Next.js build");
@@ -76,6 +77,9 @@ export async function build(projectOpts) {
     const projConfig = getConfig(projectOpts);
     // TODO: rely on options only.
     await bundleServer(projConfig, options);
+    if (!projectOpts.skipWranglerConfigCheck) {
+        await createWranglerConfigIfNotExistent(projectOpts);
+    }
     logger.info("OpenNext build complete.");
 }
 /**
@@ -141,3 +145,74 @@ function ensureCloudflareConfig(config) {
         }\n\n`.replace(/^ {8}/gm, ""));
     }
 }
+/**
+ * Creates a `wrangler.json` file for the user if a wrangler config file doesn't already exist,
+ * but only after asking for the user's confirmation.
+ *
+ * If the user refuses a warning is shown (which offers ways to opt out of this check to the user).
+ *
+ * Note: we generate a wrangler.json file with comments instead of using the jsonc extension,
+ *       we decided to do that since json is more common than jsonc, wrangler also parses
+ *       them in the same way and we also expect developers to associate `wrangler.json`
+ *       files to the jsonc language
+ *
+ * @param projectOpts The options for the project
+ */
+async function createWranglerConfigIfNotExistent(projectOpts) {
+    const possibleExts = ["toml", "json", "jsonc"];
+    const wranglerConfigFileExists = possibleExts.some((ext) => existsSync(join(projectOpts.sourceDir, `wrangler.${ext}`)));
+    if (wranglerConfigFileExists) {
+        return;
+    }
+    const answer = await askConfirmation("No `wrangler.(toml|json|jsonc)` config file found, do you want to create one?");
+    if (!answer) {
+        console.warn("No Wrangler config file created" +
+            "\n" +
+            "(to avoid this check use the `--skipWranglerConfigCheck` flag or set a `SKIP_WRANGLER_CONFIG_CHECK` environment variable to `yes`)");
+        return;
+    }
+    const wranglerConfigTemplate = readFileSync(join(getPackageTemplatesDirPath(), "defaults", "wrangler.jsonc"), "utf8");
+    let wranglerConfigContent = wranglerConfigTemplate;
+    const appName = getAppNameFromPackageJson(projectOpts.sourceDir) ?? "app-name";
+    if (appName) {
+        wranglerConfigContent = wranglerConfigContent.replace('"app-name"', JSON.stringify(appName.replaceAll("_", "-")));
+    }
+    const compatDate = await getLatestCompatDate();
+    if (compatDate) {
+        wranglerConfigContent = wranglerConfigContent.replace(/"compatibility_date": "\d{4}-\d{2}-\d{2}"/, `"compatibility_date": ${JSON.stringify(compatDate)}`);
+    }
+    writeFileSync(join(projectOpts.sourceDir, "wrangler.json"), wranglerConfigContent);
+}
+function getAppNameFromPackageJson(sourceDir) {
+    try {
+        const packageJsonStr = readFileSync(join(sourceDir, "package.json"), "utf8");
+        const packageJson = JSON.parse(packageJsonStr);
+        if (typeof packageJson.name === "string")
+            return packageJson.name;
+    }
+    catch {
+        /* empty */
+    }
+}
+export async function getLatestCompatDate() {
+    try {
+        const resp = await fetch(`https://registry.npmjs.org/workerd`);
+        const latestWorkerdVersion = (await resp.json())["dist-tags"].latest;
+        // The format of the workerd version is `major.yyyymmdd.patch`.
+        const match = latestWorkerdVersion.match(/\d+\.(\d{4})(\d{2})(\d{2})\.\d+/);
+        if (match) {
+            const [, year, month, date] = match;
+            const compatDate = `${year}-${month}-${date}`;
+            return compatDate;
+        }
+    }
+    catch {
+        /* empty */
+    }
+}
+function ensureNextjsVersionSupported(options) {
+    if (buildHelper.compareSemver(options.nextVersion, "14.0.0") < 0) {
+        logger.error("Next.js version unsupported, please upgrade to version 14 or greater.");
+        process.exit(1);
+    }
+}

package/dist/cli/build/patches/to-investigate/patch-exception-bubbling.js

@@ -5,5 +5,13 @@
  * promises.
  */
 export function patchExceptionBubbling(code) {
-    return code.replace('_nextBubbleNoFallback = "1"', "_nextBubbleNoFallback = undefined");
+    // The code before had: `query._nextBubbleNoFallback = '1'`, that has ben refactored to
+    // `addRequestMeta(req, 'bubbleNoFallback', true)` in https://github.com/vercel/next.js/pull/74100
+    // we need to support both for backward compatibility, that's why we have the following if statement
+    if (code.includes("_nextBubbleNoFallback")) {
+        return code.replace('_nextBubbleNoFallback = "1"', "_nextBubbleNoFallback = undefined");
+    }
+    // The Next.js transpiled code contains something like `(0, _requestmeta.addRequestMeta)(req, "bubbleNoFallback", true);`
+    // and we want to update it to `(0, _requestmeta.addRequestMeta)(req, "bubbleNoFallback", false);`
+    return code.replace(/\((.*?.addRequestMeta\)\(.*?,\s+"bubbleNoFallback"),\s+true\)/, "($1, false)");
 }

package/dist/cli/build/patches/to-investigate/wrangler-deps.js

@@ -1,5 +1,7 @@
 import { readFileSync, statSync, writeFileSync } from "node:fs";
 import { join } from "node:path";
+import * as ts from "ts-morph";
+import { tsParseFile } from "../../utils/index.js";
 export function patchWranglerDeps(config) {
     console.log("# patchWranglerDeps");
     const distPath = getDistPath(config);
@@ -13,6 +15,7 @@ export function patchWranglerDeps(config) {
     const pagesRuntimeFile = join(distPath, "compiled", "next-server", "pages.runtime.prod.js");
     const patchedPagesRuntime = readFileSync(pagesRuntimeFile, "utf-8").replace(`e.exports=require("critters")`, `e.exports={}`);
     writeFileSync(pagesRuntimeFile, patchedPagesRuntime);
+    patchRequireReactDomServerEdge(config);
     // Patch .next/standalone/node_modules/next/dist/server/lib/trace/tracer.js
     //
     // Remove the need for an alias in wrangler.toml:
@@ -52,3 +55,92 @@ function getDistPath(config) {
     }
     throw new Error("Unexpected error: unable to detect the node_modules/next/dist directory");
 }
+/**
+ * `react-dom` v>=19 has a `server.edge` export: https://github.com/facebook/react/blob/a160102f3/packages/react-dom/package.json#L79
+ * but version of `react-dom` <= 18 do not have this export but have a `server.browser` export instead: https://github.com/facebook/react/blob/8a015b68/packages/react-dom/package.json#L49
+ *
+ * Next.js also try-catches importing the `server.edge` export:
+ *  https://github.com/vercel/next.js/blob/6784575/packages/next/src/server/ReactDOMServerPages.js
+ *
+ * The issue here is that in the `.next/standalone/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js`
+ * file for whatever reason there is a non `try-catch`ed require for the `server.edge` export
+ *
+ * This functions fixes this issue by wrapping the require in a try-catch block in the same way Next.js does it
+ * (note: this will make the build succeed but doesn't guarantee that everything will necessarily work at runtime since
+ * it's not clear what code and how might be rely on this require call)
+ *
+ */
+function patchRequireReactDomServerEdge(config) {
+    const distPath = getDistPath(config);
+    // Patch .next/standalone/node_modules/next/dist/compiled/next-server/pages.runtime.prod.js
+    const pagesRuntimeFile = join(distPath, "compiled", "next-server", "pages.runtime.prod.js");
+    const code = readFileSync(pagesRuntimeFile, "utf-8");
+    const file = tsParseFile(code);
+    // we need to update this function: `e=>{"use strict";e.exports=require("react-dom/server.edge")}`
+    file.getDescendantsOfKind(ts.SyntaxKind.ArrowFunction).forEach((arrowFunction) => {
+        // the function has a single parameter
+        const p = arrowFunction.getParameters();
+        if (p.length !== 1) {
+            return;
+        }
+        const parameterName = p[0].getName();
+        const bodyChildren = arrowFunction.getBody().getChildren();
+        if (!(bodyChildren.length === 3 &&
+            bodyChildren[0].getFullText() === "{" &&
+            bodyChildren[2].getFullText() === "}")) {
+            return;
+        }
+        const bodyStatements = bodyChildren[1]?.getChildren();
+        // the function has only two statements: "use strict" and e.exports=require("react-dom/server.edge")
+        if (!(bodyStatements?.length === 2 &&
+            bodyStatements.every((statement) => statement.isKind(ts.SyntaxKind.ExpressionStatement)))) {
+            return;
+        }
+        const bodyExpressionStatements = bodyStatements;
+        const stringLiteralExpression = bodyExpressionStatements[0].getExpressionIfKind(ts.SyntaxKind.StringLiteral);
+        // the first statement needs to be "use strict"
+        if (stringLiteralExpression?.getText() !== '"use strict"') {
+            return;
+        }
+        // the second statement (e.exports=require("react-dom/server.edge")) needs to be a binary expression
+        const binaryExpression = bodyExpressionStatements[1].getExpressionIfKind(ts.SyntaxKind.BinaryExpression);
+        if (!binaryExpression?.getOperatorToken().isKind(ts.SyntaxKind.EqualsToken)) {
+            return;
+        }
+        // on the left we have `${parameterName}.exports`
+        const binaryLeft = binaryExpression.getLeft();
+        if (!binaryLeft.isKind(ts.SyntaxKind.PropertyAccessExpression) ||
+            binaryLeft.getExpressionIfKind(ts.SyntaxKind.Identifier)?.getText() !== parameterName ||
+            binaryLeft.getName() !== "exports") {
+            return;
+        }
+        // on the right we have `require("react-dom/server.edge")`
+        const binaryRight = binaryExpression.getRight();
+        if (!binaryRight.isKind(ts.SyntaxKind.CallExpression) ||
+            binaryRight.getExpressionIfKind(ts.SyntaxKind.Identifier)?.getText() !== "require") {
+            return;
+        }
+        const requireArgs = binaryRight.getArguments();
+        if (requireArgs.length !== 1 || requireArgs[0].getText() !== '"react-dom/server.edge"') {
+            return;
+        }
+        arrowFunction.setBodyText(`
+      "use strict";
+      let ReactDOMServer;
+      try {
+          ReactDOMServer = require('react-dom/server.edge');
+      } catch (error) {
+          if (
+          error.code !== 'MODULE_NOT_FOUND' &&
+          error.code !== 'ERR_PACKAGE_PATH_NOT_EXPORTED'
+          ) {
+          throw error;
+          }
+          ReactDOMServer = require('react-dom/server.browser');
+      }
+      ${parameterName}.exports = ReactDOMServer;
+      }`.replace(/\ns*/g, " "));
+    });
+    const updatedCode = file.print();
+    writeFileSync(pagesRuntimeFile, updatedCode);
+}

package/dist/cli/build/utils/extract-project-env-vars.d.ts

@@ -6,7 +6,7 @@ import type { BuildOptions } from "@opennextjs/aws/build/helper.js";
  *
  * Merged variables respect the following priority order.
  * 1. `.env.{mode}.local`
- * 2. `.env.local`
+ * 2. `.env.local` (when mode is not equal to `test`)
  * 3. `.env.{mode}`
  * 4. `.env`
  *

package/dist/cli/build/utils/extract-project-env-vars.js

@@ -13,7 +13,7 @@ function readEnvFile(filePath) {
  *
  * Merged variables respect the following priority order.
  * 1. `.env.{mode}.local`
- * 2. `.env.local`
+ * 2. `.env.local` (when mode is not equal to `test`)
  * 3. `.env.{mode}`
  * 4. `.env`
  *
@@ -23,7 +23,7 @@ function readEnvFile(filePath) {
  * the env files at the root of the monorepo.
  */
 export function extractProjectEnvVars(mode, { monorepoRoot, appPath }) {
-    return [".env", `.env.${mode}`, ".env.local", `.env.${mode}.local`]
+    return [".env", `.env.${mode}`, ...(mode !== "test" ? [".env.local"] : []), `.env.${mode}.local`]
         .flatMap((fileName) => [
         ...(monorepoRoot !== appPath ? [readEnvFile(path.join(monorepoRoot, fileName))] : []),
         readEnvFile(path.join(appPath, fileName)),

package/dist/cli/build/utils/extract-project-env-vars.spec.js

@@ -8,6 +8,8 @@ describe("extractProjectEnvVars", () => {
         mockFs({
             ".env": "ENV_VAR=value",
             ".env.local": "ENV_LOCAL_VAR=value",
+            ".env.test": "ENV_TEST_VAR=value",
+            ".env.test.local": "ENV_TEST_LOCAL_VAR=value",
             ".env.development": "ENV_DEV_VAR=value",
             ".env.development.local": "ENV_DEV_LOCAL_VAR=value",
             ".env.production": "ENV_PROD_VAR=value",
@@ -54,4 +56,12 @@ describe("extractProjectEnvVars", () => {
             ENV_VAR: "value",
         });
     });
+    it("should exclude .env.local files when extracting test env vars", () => {
+        const result = extractProjectEnvVars("test", options);
+        expect(result).toEqual({
+            ENV_TEST_LOCAL_VAR: "value",
+            ENV_TEST_VAR: "value",
+            ENV_VAR: "value",
+        });
+    });
 });

package/dist/cli/config.d.ts

@@ -37,5 +37,6 @@ export type ProjectOptions = {
     sourceDir: string;
     outputDir: string;
     skipNextBuild: boolean;
+    skipWranglerConfigCheck: boolean;
     minify: boolean;
 };

package/dist/cli/index.js

@@ -3,10 +3,11 @@ import { resolve } from "node:path";
 import { getArgs } from "./args.js";
 import { build } from "./build/index.js";
 const nextAppDir = process.cwd();
-const { skipNextBuild, outputDir, minify } = getArgs();
+const { skipNextBuild, skipWranglerConfigCheck, outputDir, minify } = getArgs();
 await build({
     sourceDir: nextAppDir,
     outputDir: resolve(outputDir ?? nextAppDir, ".open-next"),
     skipNextBuild,
+    skipWranglerConfigCheck,
     minify,
 });

package/dist/cli/templates/worker.js

@@ -45,9 +45,6 @@ export default {
  * Note that cloudflare env string values are copied by the middleware handler.
  */
 async function populateProcessEnv(url, nextJsEnv) {
-    if (process.env.__PROCESS_ENV_POPULATED === "1") {
-        return;
-    }
     // @ts-expect-error: resolved by wrangler build
     const nextEnvVars = await import("./.env.mjs");
     const mode = nextJsEnv ?? "production";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opennextjs/cloudflare",
   "description": "Cloudflare builder for next apps",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "type": "module",
   "bin": {
     "opennextjs-cloudflare": "dist/cli/index.js"
@@ -61,7 +61,7 @@
   },
   "dependencies": {
     "@dotenvx/dotenvx": "1.31.0",
-    "@opennextjs/aws": "https://pkg.pr.new/@opennextjs/aws@684",
+    "@opennextjs/aws": "https://pkg.pr.new/@opennextjs/aws@688",
     "glob": "^11.0.0",
     "rimraf": "^6.0.1",
     "ts-morph": "^23.0.0",

package/templates/defaults/wrangler.jsonc

@@ -0,0 +1,18 @@
+{
+  "main": ".open-next/worker.js",
+  "name": "app-name",
+  "compatibility_date": "2024-12-30",
+  "compatibility_flags": ["nodejs_compat"],
+  "assets": {
+    "directory": ".open-next/assets",
+    "binding": "ASSETS"
+  },
+  "kv_namespaces": [
+    // Create a KV binding with the binding name "NEXT_CACHE_WORKERS_KV"
+    // to enable the KV based caching:
+    // {
+    //   "binding": "NEXT_CACHE_WORKERS_KV",
+    //   "id": "<BINDING_ID>"
+    // }
+  ]
+}