Fix react dependencies resolution (#129)

* fix: incorrect react resolution in non-hoisted monorepo

* fix: replace getMaybePagePath to handle dynamic routes

* Sync

---------

Co-authored-by: Frank <[email protected]>

Author: conico974

.changeset/flat-monkeys-behave.md

@@ -0,0 +1,5 @@
+---
+"open-next": patch
+---
+
+server: Fix react dependencies resolution

packages/open-next/src/adapters/next-types.ts

@@ -35,3 +35,13 @@ export interface NextConfig {
   };
   images: ImageConfig;
 }
+
+interface RouteDefinition {
+  page: string;
+  regex: string;
+}
+
+export interface RoutesManifest {
+  dynamicRoutes: RouteDefinition[];
+  staticRoutes: RouteDefinition[];
+}

packages/open-next/src/adapters/require-hooks.ts

@@ -31,8 +31,6 @@ export function overrideDefault() {
       ["styled-jsx", require.resolve("styled-jsx")],
       ["styled-jsx/style", require.resolve("styled-jsx/style")],
       ["styled-jsx/style", require.resolve("styled-jsx/style")],
-      ["server-only", require.resolve("next/dist/compiled/server-only")],
-      ["client-only", require.resolve("next/dist/compiled/client-only")],
     ],
     "app"
   );
@@ -42,17 +40,20 @@ export function overrideDefault() {
 export function overrideReact(config: NextConfig) {
   addHookAliases(
     [
-      ["react", `/var/task/node_modules/react`],
-      ["react/jsx-runtime", `/var/task/node_modules/react/jsx-runtime`],
-      ["react/jsx-dev-runtime", `/var/task/node_modules/react/jsx-dev-runtime`],
-      ["react-dom", `/var/task/node_modules/react-dom`],
-      [
-        "react-dom/server.browser",
-        `/var/task/node_modules/react-dom/server.browser`,
-      ],
+      ["react", require.resolve(`react`)],
+      ["react/jsx-runtime", require.resolve(`react/jsx-runtime`)],
     ],
     "page"
   );
+
+  // ignore: react/jsx-dev-runtime is not available on older version of Next.js ie. v13.1.6
+  try {
+    addHookAliases(
+      [["react/jsx-dev-runtime", require.resolve(`react/jsx-dev-runtime`)]],
+      "page"
+    );
+  } catch (e) {}
+
   if (config.experimental.appDir) {
     if (config.experimental.serverActions) {
       addHookAliases(

packages/open-next/src/adapters/server-adapter.ts

@@ -1,4 +1,3 @@
-import fs from "node:fs";
 import path from "node:path";
 import { IncomingMessage } from "./request.js";
 import { ServerResponse } from "./response.js";
@@ -7,32 +6,41 @@ import type {
   APIGatewayProxyEvent,
   CloudFrontRequestEvent,
 } from "aws-lambda";
-// @ts-ignore
-import NextServer from "next/dist/server/next-server.js";
-//@ts-ignore
-import { getMaybePagePath } from "next/dist/server/require.js";
-import { generateUniqueId, loadConfig, setNodeEnv } from "./util.js";
+import {
+  generateUniqueId,
+  loadAppPathsManifest,
+  loadConfig,
+  loadHtmlPages,
+  loadPublicAssets,
+  loadRoutesManifest,
+  setNodeEnv,
+} from "./util.js";
 import { isBinaryContentType } from "./binary.js";
 import { debug } from "./logger.js";
-import type { PublicFiles } from "../build.js";
 import { convertFrom, convertTo } from "./event-mapper.js";
 import { overrideDefault, overrideReact } from "./require-hooks.js";
 import type { WarmerEvent, WarmerResponse } from "./warmer-function.js";
 
 const NEXT_DIR = path.join(__dirname, ".next");
 const OPEN_NEXT_DIR = path.join(__dirname, ".open-next");
-const NODE_MODULES_DIR = path.join(__dirname, "node_modules");
 debug({ NEXT_DIR, OPEN_NEXT_DIR });
 
 setNodeEnv();
 setNextjsServerWorkingDirectory();
 const config = loadConfig(NEXT_DIR);
-const htmlPages = loadHtmlPages();
-const publicAssets = loadPublicAssets();
-initializeNextjsRequireHooks(config);
-
+const htmlPages = loadHtmlPages(NEXT_DIR);
+const routesManifest = loadRoutesManifest(NEXT_DIR);
+const appPathsManifest = loadAppPathsManifest(NEXT_DIR);
+const publicAssets = loadPublicAssets(OPEN_NEXT_DIR);
 // Generate a 6 letter unique server ID
 const serverId = `server-${generateUniqueId()}`;
+
+// Need to override the require hooks for React before Next.js server
+// overrides them with prebundled ones in the case of app dir
+overrideNextjsRequireHooks(config);
+
+// @ts-ignore
+import NextServer from "next/dist/server/next-server.js";
 const requestHandler = new NextServer.default({
   hostname: "localhost",
   port: Number(process.env.PORT) || 3000,
@@ -127,34 +135,40 @@ function setNextjsServerWorkingDirectory() {
   process.chdir(__dirname);
 }
 
-function initializeNextjsRequireHooks(config: any) {
+function overrideNextjsRequireHooks(config: any) {
   // WORKAROUND: Set `__NEXT_PRIVATE_PREBUNDLED_REACT` to use prebundled React — https://github.com/serverless-stack/open-next#workaround-set-__next_private_prebundled_react-to-use-prebundled-react
-  if (!isNextjsVersionAtLeast("13.1.3")) return;
-  overrideDefault();
-  overrideReact(config);
+  try {
+    overrideDefault();
+    overrideReact(config);
+  } catch (e) {
+    console.error("Failed to override Next.js require hooks.", e);
+    throw e;
+  }
 }
 
 function setNextjsPrebundledReact(req: IncomingMessage, config: any) {
   // WORKAROUND: Set `__NEXT_PRIVATE_PREBUNDLED_REACT` to use prebundled React — https://github.com/serverless-stack/open-next#workaround-set-__next_private_prebundled_react-to-use-prebundled-react
 
-  // "getMaybePagePath" is not present in older version of next.js
-  // => use node_modules React
-  if (!getMaybePagePath) {
-    process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = undefined;
+  // Get route pattern
+  const route = [
+    ...routesManifest.staticRoutes,
+    ...routesManifest.dynamicRoutes,
+  ].find((route) => new RegExp(route.regex).test(req.url ?? ""));
+
+  const isApp = appPathsManifest[`${route?.page}/page`];
+  debug("setNextjsPrebundledReact", { url: req.url, isApp });
+
+  // app routes => use prebundled React
+  if (isApp) {
+    process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = config.experimental
+      .serverActions
+      ? "experimental"
+      : "next";
     return;
   }
 
-  // pages route => use node_modules React
-  if (getMaybePagePath(req.url, NEXT_DIR, config.i18n?.locales, false)) {
-    process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = undefined;
-    return;
-  }
-
-  // app router => use prebundled React
-  process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = config.experimental
-    .serverActions
-    ? "experimental"
-    : "next";
+  // page routes => use node_modules React
+  process.env.__NEXT_PRIVATE_PREBUNDLED_REACT = undefined;
 }
 
 async function processRequest(req: IncomingMessage, res: ServerResponse) {
@@ -197,28 +211,3 @@ function formatWarmerResponse(event: WarmerEvent) {
     }, event.delay);
   });
 }
-
-function isNextjsVersionAtLeast(required: `${number}.${number}.${number}`) {
-  const version = require("next/package.json").version;
-  const [major, minor, patch] = version.split("-")[0].split(".").map(Number);
-  const [reqMajor, reqMinor, reqPatch] = required.split(".").map(Number);
-  return (
-    major > reqMajor ||
-    (major === reqMajor && minor > reqMinor) ||
-    (major === reqMajor && minor === reqMinor && patch >= reqPatch)
-  );
-}
-
-function loadHtmlPages() {
-  const filePath = path.join(NEXT_DIR, "server", "pages-manifest.json");
-  const json = fs.readFileSync(filePath, "utf-8");
-  return Object.entries(JSON.parse(json))
-    .filter(([_, value]) => (value as string).endsWith(".html"))
-    .map(([key]) => key);
-}
-
-function loadPublicAssets() {
-  const filePath = path.join(OPEN_NEXT_DIR, "public-files.json");
-  const json = fs.readFileSync(filePath, "utf-8");
-  return JSON.parse(json) as PublicFiles;
-}

packages/open-next/src/adapters/util.ts

@@ -1,6 +1,7 @@
 import fs from "node:fs";
 import path from "node:path";
-import type { NextConfig } from "./next-types.js";
+import type { NextConfig, RoutesManifest } from "./next-types.js";
+import type { PublicFiles } from "../build.js";
 
 export function setNodeEnv() {
   process.env.NODE_ENV = process.env.NODE_ENV ?? "production";
@@ -16,3 +17,35 @@ export function loadConfig(nextDir: string) {
   const { config } = JSON.parse(json);
   return config as NextConfig;
 }
+
+export function loadHtmlPages(nextDir: string) {
+  const filePath = path.join(nextDir, "server", "pages-manifest.json");
+  const json = fs.readFileSync(filePath, "utf-8");
+  return Object.entries(JSON.parse(json))
+    .filter(([_, value]) => (value as string).endsWith(".html"))
+    .map(([key]) => key);
+}
+
+export function loadPublicAssets(openNextDir: string) {
+  const filePath = path.join(openNextDir, "public-files.json");
+  const json = fs.readFileSync(filePath, "utf-8");
+  return JSON.parse(json) as PublicFiles;
+}
+
+export function loadRoutesManifest(nextDir: string) {
+  const filePath = path.join(nextDir, "routes-manifest.json");
+  const json = fs.readFileSync(filePath, "utf-8");
+  return JSON.parse(json) as RoutesManifest;
+}
+
+export function loadAppPathsManifest(nextDir: string) {
+  const appPathsManifestPath = path.join(
+    nextDir,
+    "server",
+    "app-paths-manifest.json"
+  );
+  const appPathsManifestJson = fs.existsSync(appPathsManifestPath)
+    ? fs.readFileSync(appPathsManifestPath, "utf-8")
+    : "{}";
+  return JSON.parse(appPathsManifestJson) as Record<string, string>;
+}